React Native For Android

Seay 发布于2019-08-29 11:12 / 1303人阅读

摘要：最后一步就是要绑定事件不懂的可以自己查阅官方文档与提供了与方法来控制的路线，相当于我们熟知的栈。为初始化数据源可以通过状态来进行保存。详情发布日期提供了四个参数这里主要是利用来获取数据源。

前言

React Native有点大势所趋，所以前段时间研究了下它，看了它的官方文档同时也在Github浏览了前辈们的杰作，所以自己也写了一个简单的Demo也算是一个好的入门。配合官方文档与代码实例相信都能很快的进入React Native的世界。下面我介绍的不会很详细，是针对React Native语法有一定会基础的同学。

React Native介绍

这里简单的介绍下React Native

它是借助于FaceBook现有的轮子，它可以实现对ISO和Android两大平台的支持

使用React.js来操作原生的UI组件，替代了DOM元素

在UI方面，提供了Flexbox的布局，同时也支持css-layout样式

使用JSX来转换成JS来执行，JSX是一种类似于XML语法的脚步扩展语言。

对于React Native的环境搭建,可以参考官方文档Getting Started,如果英文不好的别急，这里还有中文版的Getting Started

推荐使用英文版的，中文版的还是存在坑，下面简单的介绍下Demo中用到的组件

Navigator

这是一个导航器,直白的理解就是实现界面之间的跳转，在React Native中借助它能很好的实现界面的切换。实现它需要实现几个必要的方法。

 Navigator.SceneConfigs.FloatFromLeft}
          renderScene={this.renderScene}/>

initialRoute

Navigator都是由route来控制跳转路线的，所以开始使用时要初始化route

initialRoute={{title: "主页", component: Welcome}}

里面的参数名不受限制，但是你必须要指明跳转的Componnet组件名，方便在后续执行中取出。可以通过route.component取出。

renderScene

该配置就是执行没一个route的具体实现，从而渲染出来，它提供两个内置参数route与navigator，来方便渲染

renderScene={this.renderScene}

renderScene(route, navigator){
    _navigator = navigator;
    let DefaultComponet = route.component;
    return 
  }

在renderScene中我们取出每次要导航的Component，同时渲染出来，并且把route与navigator传到渲染的界面中。在渲染界面可以通过this.props.rout与this.props.navigator来获取。最后一步就是要绑定事件

this.renderScene = this.renderScene.bind(this);

不懂props的可以自己查阅官方文档

push与pop

Navigator提供了push与pop方法来控制route的路线，相当于我们熟知的栈。通过push来设置下一个导航的route，通过pop来退出该界面返回原来的界面。

 this.props.navigator.push({
        title: "详情",
        component: Detail,
        number: rowID,
      })}>
      
        
          
            {rowData.title}
          
          ....

TouchableOpacity是一个点击监听组件，可以绑定点击事件。

 this.props.navigator.pop()}>

在点击以后渲染出来的界面中调用pop方法退出该渲染.

ListView

是不是感觉很亲切，它要实现的功能跟Android中是一样的。但是使用方法就不同了哦。不过整体需要的数据原理还是类似。无非也要整个的数据源，与绑定没个Item的数据。

rowHasChanged

在渲染之前要设置判断该数据是否需要从新渲染，这样就减少许多不必要的渲染步骤，该方法能帮助我们进行判断。

const listView = new ListView.DataSource({
      rowHasChanged: (r1,r2) => r1!==r2});

cloneWithRows

为listView初始化数据源,可以通过state状态来进行保存。

this.state={
      dataSource: listView.cloneWithRows(this._rowData())};
  }

绑定

最后在渲染render()生命周期方法中进行组件资源绑定:

其中dataSource与renderRow是两个必要的方法，前一个是绑定数据源，后一个是绑定渲染的每一行的数据。其中_renderRow是Item的布局。

_renderRow(rowData,sectionID,rowID,highlightRow){
    return(
     this.props.navigator.push({
        title: "详情",
        component: Detail,
        number: rowID,
      })}>
      
        
          
            {rowData.title}
          
          
            
              {"发布: "+rowData.fb}
            
            
              {"日期: "+rowData.data}
            
          
        
        
      
      
    );
  }

renderRow提供了四个参数rowData,sectionID,rowID,highlightRow这里主要是利用rowData来获取数据源。布局样式是使用css-layout来实现,可以直接在组件是使用

style={{flex: 1}}

或者通过StyleSheet来统一创建:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF",
  },
  title: {
    backgroundColor: "royalblue",
    justifyContent: "center",
    alignItems: "center",
    borderColor: "gray",
    borderBottomWidth: 1,
  },
  ...
});

css这里不多说，自己可以参考官方文档

TabNavigator

这里再简单介绍下TabNavigator这是一个类似于Android中的FragmentTabHost。相信都知道它的功能是什么了。


         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({selectedTab: "news"})}>
          
        
        ...

通过子标签来设置每一个底部Item，在其中在设置该Item要渲染的界面，上面的News就是要渲染的界面,该界面可以通过export default News导出，import News from "./News"导入。

先就介绍到这里，如果还有需要可以下载源码,后续还会继续再做扩展

效果图

项目地址：https://github.com/idisfkj/RN...
个人blog：https://idisfkj.github.io

关注

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111496.html

React Native植入原生Android应用的流程解析

摘要：在应用内添加依赖回到，到的文件级别的里添加依赖最后一行的就是我们新增的，注意这里的版本号要和里的一致。因此，建议用这样的写法，并检查版本号是否和里的一致。引言 React Native是现在移动开发新的可选方案，也带来了原属于Web领域的React的优秀开发特性。另一方面，React Native的技术栈一经掌握，可以用于iOS、Android及Windows（见此）多个平台，即所说...

worldligang 2019-08-19 18:35 评论0 收藏0
React Native植入原生Android应用的流程解析

摘要：在应用内添加依赖回到，到的文件级别的里添加依赖最后一行的就是我们新增的，注意这里的版本号要和里的一致。因此，建议用这样的写法，并检查版本号是否和里的一致。引言 React Native是现在移动开发新的可选方案，也带来了原属于Web领域的React的优秀开发特性。另一方面，React Native的技术栈一经掌握，可以用于iOS、Android及Windows（见此）多个平台，即所说...

荆兆峰 2019-06-24 19:32 评论0 收藏0
Android混合开发

摘要：另外已经开始报名，定于月日在上海举行，早鸟票已售罄，想去的抓紧时间报名。和相互调用当前的开发中，会使用大量的甚至出现了混合开发模式，使用开发，页面开发效率高和移植便利性为主。前端周刊第 52 期：JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边哈哈，互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口，讨论这件事情的文章很多，前端周刊就没有收录...

张巨伟 2019-06-25 11:47 评论0 收藏0
#react-native BUG#

摘要：重启再次点击应该就不会报错了替换成下面的这个，即在加一个运行下面的命令清除缓存然后在尝试直接根据端口找进程可以得到一个杀死进程在写项目的时候剩余运算符解析报错。这篇文章主要解决react-native中遇到的bug。环境：window10 Error: Command failed: gradlew.bat installDebug 编译并运行 React Native 应用之前我们...

william 2019-08-23 15:33 评论0 收藏0
React Native Vs. Xamarin Vs. Ionic Vs. Flutter

React Native Vs. Xamarin Vs. Ionic Vs. Flutter:Which Is Best For Cross-Platform Mobile App Development? While developing Native Mobile Apps, Android apps are written in Java, and iOS ones in Swift and...

Clect 2019-08-23 15:11 评论0 收藏0
SegmentFault 技术周刊 Vol.4 - 这份 Android 有点甜

摘要：阅读本期周刊，你将快速入门，开启甜蜜之旅。然则的原理负责发送以及处理消息，创建消息队列并不断从队列中取出消息交给，则用于保存消息。 showImg(/img/bVCN99?w=900&h=385); 2016 年 8 月，Android 7.0 Nougat（牛轧糖）正式发布，那么问题来了，你 Marshmallow 了么(¬ -̮ ¬) Cupcake、Donut、Gingerbre...

jay_tian 2019-08-14 14:38 评论0 收藏0