欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 23:40:12
...

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

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

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

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

列表页:
React Native学习笔记(3)--NavigatorIOS组件

详情页:
React Native学习笔记(3)--NavigatorIOS组件

这里我们为路由设置对应的组件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);