React Native For Android

原创 2016年08月29日 16:15:07

前言

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

React Native介绍

这里简单的介绍下React Native

  • 它是借助于FaceBook现有的轮子,它可以实现对ISOAndroid两大平台的支持
  • 使用React.js来操作原生的UI组件,替代了DOM元素
  • UI方面,提供了Flexbox的布局,同时也支持css-layout样式
  • 使用JSX来转换成JS来执行,JSX是一种类似于XML语法的脚步扩展语言。

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

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

Navigator

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

<Navigator initialRoute={{title: '主页', component: Welcome}}
          configureScene={(route,routeStack) => Navigator.SceneConfigs.FloatFromLeft}
          renderScene={this.renderScene}/>

initialRoute

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

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

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

renderScene

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

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

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

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

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

push与pop

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

<TouchableOpacity onPress={() => this.props.navigator.push({
        title: '详情',
        component: Detail,
        number: rowID,
      })}>
      <View style={styles.item}>
        <View style={styles.content}>
          <Text style={styles.des}>
            {rowData.title}
          </Text>
          ....
      </View>
</TouchableOpacity>      

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

<TouchableOpacity onPress={() => this.props.navigator.pop()}>
            <Image source={require('../imgs/back.png')} style={styles.back}/>
          </TouchableOpacity>

在点击以后渲染出来的界面中调用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()生命周期方法中进行组件资源绑定:

<ListView
            style={styles.container}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow.bind(this)}/>
          </View>

其中dataSourcerenderRow是两个必要的方法,前一个是绑定数据源,后一个是绑定渲染的每一行的数据。其中_renderRowItem的布局。

_renderRow(rowData,sectionID,rowID,highlightRow){
    return(
    <TouchableOpacity onPress={() => this.props.navigator.push({
        title: '详情',
        component: Detail,
        number: rowID,
      })}>
      <View style={styles.item}>
        <View style={styles.content}>
          <Text style={styles.des}>
            {rowData.title}
          </Text>
          <View style={styles.bottom}>
            <Text style={styles.fb}>
              {"发布: "+rowData.fb}
            </Text>
            <Text style={styles.data}>
              {"日期: "+rowData.data}
            </Text>
          </View>
        </View>
        <Image style={styles.image}
        source={{uri: rowData.image}}/>
      </View>
      </TouchableOpacity>
    );
  }

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。相信都知道它的功能是什么了。

<TabNavigator>
        <TabNavigator.Item
          title="新闻"
          selected={this.state.selectedTab==='news'}
          selectedTitleStyle={styles.selectedText}
          titleStyle={styles.text}
          renderIcon={() => <Image source={require('../imgs/ic_news.png')} style={styles.image}/>}
          renderSelectedIcon={() => <Image source={require('../imgs/ic_news_pressed.png')} style={styles.image}/>}
          onPress={() => this.setState({selectedTab: 'news'})}>
          <News {...this.props}/>
        </TabNavigator.Item>
        ...
</TabNavigator>

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

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

效果图

效果图

项目地址:https://github.com/idisfkj/RNDemo

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fan757709373/article/details/52354127

完全征服React Native

React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用最新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合
  • 2016年08月22日 11:47

React Native高级

  • 2017年09月20日 21:53
  • 51B
  • 下载

React Native与Android通信交互

在前两篇的内容中,和大家分享了Android原生集成RN,以及RN的增量热更新。关于详细的内容,点击如下具体了解:   Android App巧妙集成React Native最详教程   Re...
  • u013718120
  • u013718120
  • 2017-02-17 11:56:16
  • 9319

React Native和Android整合详解

前言按照React Native的迭代速度,使用官网的文档,已经不能很顺利的实现React Native和Android的有效整合。React Native最新版本 已经是0.39。为了更好的讲解Re...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-01-01 10:35:23
  • 5390

Android之Windows下搭建React Native Android开发环境(差不多搞了一天)

最新情报 0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。 安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统P...
  • u011068702
  • u011068702
  • 2015-10-27 14:43:29
  • 18674

Android原生项目集成React Native

1.创建Android工程:ReactNativeApp 关于如何创建Android工程就不再多述了。 2.工程创建完毕后,切换到Android Studio左下角的Terminal窗口,...
  • u013718120
  • u013718120
  • 2017-02-13 18:01:24
  • 8702

Android之React native的介绍和入门指南

链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架...
  • u011068702
  • u011068702
  • 2015-10-26 22:55:42
  • 5042

React React Native 全套

  • 2017年11月09日 16:28
  • 73B
  • 下载

React Native电商项目实战

  • 2017年11月27日 15:43
  • 54B
  • 下载

Android项目中集成React Native

React Native是非常强大的,但有的时候我们可能并不需要从0开始去开发一个React Native应用,而是需要把它集成到我们现有的Android工程中去,去添加单个的React Native...
  • heqiangflytosky
  • heqiangflytosky
  • 2017-02-27 14:29:27
  • 2354
收藏助手
不良信息举报
您举报文章:React Native For Android
举报原因:
原因补充:

(最多只允许输入30个字)