React Native学习笔记(3)--NavigatorIOS组件

本篇是在学习《React Native入门与实战》这本书时做的笔记，代码基于ES6实现的，算是对该书中代码的小小更新。

NavigatorIOS是一个iOS平台的组件，一般在有二级页面的场景下使用，如：列表->详情。它是一种堆栈模式，即push压栈，pop出栈。

NavigatorIOS组件为默认的路由提供了initialRoute属性，包括component(需要加载的组件视图)，title等必要属性，我们也可以添加左边按钮、右边按钮、设置导航栏背景及文字颜色等。路由代表一个页面组件，写component属性绑定。

这里我们要实现的功能就是，点击列表项，然后将该值传到下一个页面展示。

列表页：

详情页：

这里我们为路由设置对应的组件List，标题为：’邮轮’，并设置右侧按钮文字为’分享’。最终自定义NavigatorIOS组件如下：

1、自定义NavigatorIOS组件

export default class NavigatorIOSApp extends Component {  render() {    return (      <NavigatorIOS        initialRoute={{          component: List,          title: '邮轮',          rightButtonTitle: '分享'        }}        barTintColor="darkslateblue"        titleTextColor="rgba(255, 255, 255, 0.8)"        tintColor="rgba(255, 255, 255, 0.8)"        style={{flex: 1}}      />    );  }}

2、列表组件的实现

class List extends Component {  //方法一：由next参数决定，要跳转到哪个组件，标题等其他属性。next参数依赖于render()方法中的next变量  _goto(next) {    this.props.navigator.push(next);  }  //方法二： 具体参数写死在push中， 这里的title参数，是给Detail组件传值的。  _goto2(title) {    this.props.navigator.push({          component: Detail,          title: '详情',          passProps: { myProp: 'bar',params: title },          rightButtonTitle: "购物车",          onRightButtonPress: function() {            alert("进入购物车");          }    });  }  show(title) {    alert(title);  }  render() {    // const next = {    //     component: Detail,    //     title: '详情',    //     passProps: { myProp: 'bar' }    // };    // 每个条目除了文本不一样，其它都一样，所以我们将内容放到数组中，然后通过for遍历后，传给每个View。    var list = ['* 豪华邮轮济州岛3日游', '* 豪华邮轮台湾8日游', '* 豪华邮轮地中海13日游'];    var texts = [];    for (var item of list) {      var text = (         // 这种方式不会跳转，只是在当前页面弹出对话框        // <Text style={styles.list_item} key={item} onPress={this.show.bind(this, item)}>{item}</Text>        //方法一中的跳转写法，与方法二写法一样        // <Text style={ styles.list_item } key={ item } onPress={ ()=>this._goto(next) }>{item}</Text>        //<Text style={ styles.list_item } key={ item } onPress={ ()=>this._goto2(item) }>{item}</Text>      );      //将实例化的对象放到texts数组中      texts.push(text);    }    return (      <ScrollView>        // 方法一：直接将要展示的组件写在ScrollView中，有多少写多少条        {/* <Text style={styles.list_item} onPress={()=>this._goto(next)}>* 豪华邮轮济州岛3日游</Text>        <Text style={styles.list_item} onPress={()=>this._goto(next)}>* 豪华邮轮台湾8日游</Text>        <Text style={styles.list_item} onPress={()=>this._goto(next)}>* 豪华邮轮地中海13日游</Text> */}        // 方法二：我们将所有的条目放到数组中，这种方式是不是更清晰些？        {texts}      </ScrollView>    );  }}

注意：这里的render()方法中，next变量，与ScrollView组件中注释的代码，这是两种写法。

3、Detail组件的实现

我们在_goto2()方法中，设置push后的组件为Detail，并且设置右则按钮，点击它后会弹出对话框。Detail代码如下：

class Detail extends Component {  render() {    return (      <ScrollView>        <Text style={{marginTop: 200, alignSelf: 'center', backgroundColor: 'red'}}>您选择的是：{this.props.params}</Text>      </ScrollView>    );  }}

在Detail组件中，我们通过this.props.params属性接收List传过来的参数。

4、注册并使用NavigatorIOSApp组件

class Nav extends Component {  render() {    return (      <View style={styles2.flex}>        <NavigatorIOSApp></NavigatorIOSApp>      </View>    );  }}styles2 = StyleSheet.create({  flex: {    flex: 1  }});AppRegistry.registerComponent('demo01', () => Nav);

这里可以直接使用NavigatorIOSApp组件：

AppRegistry.registerComponent('demo01', () => NavigatorIOSApp);