盒子
盒子
文章目录
  1. 前言
  2. React Native介绍
  3. Navigator
    1. initialRoute
    2. renderScene
    3. push与pop
  4. ListView
    1. rowHasChanged
    2. cloneWithRows
    3. 绑定
  5. TabNavigator
  6. 效果图

React Native For Android

2016.08.29 Rouse android  热度 ℃

前言

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中借助它能很好的实现界面的切换。实现它需要实现几个必要的方法。

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

initialRoute

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

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

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

renderScene

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

1
renderScene={this.renderScene}
1
2
3
4
5
6
renderScene(route, navigator){
    _navigator = navigator;
    let DefaultComponet = route.component;
    return <DefaultComponet
      route = {route} navigator = {navigator}/>
  }

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

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

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

push与pop

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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是一个点击监听组件，可以绑定点击事件。

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

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

ListView

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

rowHasChanged

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

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

cloneWithRows

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

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

绑定

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
_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来实现,可以直接在组件是使用

1
style={{flex: 1}}

或者通过StyleSheet来统一创建:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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。相信都知道它的功能是什么了。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

转载请指明出处 idisfkj博客：https://idisfkj.github.io

支持一下
赞赏是一门艺术