Android版本Navigator

这里用经典的React-Native练习的豆瓣电影中的几个组件做例子, 当然这是android版的

• 一般使用组件的跳转都是依赖Navigator.push()跳转下一个 , 和 navigator.pop()跳转到上一个,来切换的

• Navigaor.push()方法中可以传入一些属性方法到下一个组件

 showMovieDetail(movie) {
    this.props.navigator.push({
      title: movie.title,
      component: MovieDetail,
      passProps: { movie },                    //=> 传入的值, 
    });
  }

这里主页面需要电影列表组件, 但是是跳转的, 可以加一个中间层, 这个中间层在链接着电影列表组件MovieList .js, 而专门跳转的中间层,就是下面这个 Featured .js

import React , { Component } from 'react';
import { Navigator } from 'react-native';

import styles from '../styles/main';
import MovieList from './MovieList';

class Featured extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
        <Navigator
          style={styles.containers}
          initialRoute={{
            title: '电影列表',
            component: MovieList,
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component title={route.title} route={route} navigator={navigator} />
          }}
        />
    )
  }
};

export { Featured as default };

initialRoute默认的route, route可以把其属性或者方法作为props的值传入关联组件中,

**注意写法: **

1: initialRoute中的component 的值为要跳转的组件名
2: renderScene要把route和navigator传下去, 因为了接下来的组件的需要使用Navigator的push pop jump...等方法，
3: 其实还可以设置跳转动画

configureScene={() => {return Navigator.SceneConfigs.VerticalDownSwipeJump;}}

还有其他的你可以看这个目录下的源代码的:
node_modules/reactnative/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

上面的跳转转链接的组件为MovieList.js

..............

 //跳转方法
  showMovieDetail(movie) {
    this.props.navigator.push({
      title: movie.title,
      component: MovieDetail,
      passProps: { movie },
    });
  }

renderMovie(movie){
  return (
    <TouchableHighlight
      underlayColor='rgba(34, 26,38,0.1)'
      onPress={() => this.showMovieDetail(movie)}          //看这里调用了上面的跳转方法
    >
    <View style={styles.container}>
        <Image style={styles.thumbnail} source={{uri: movie.images.large}} />
      <View style={styles.rightContainer}>
        <Text style={styles.title}>{movie.title}</Text>
        <Text style={styles.year}>{movie.original_title} ( {movie.year} )</Text>
        <Text style={styles.redText}>{movie.rating.average}</Text>
      </View>
    </View>
    </TouchableHighlight>
  );
}

上面的代码生成一个类似下面列表中的其中一个单元的小组件

列表中的其中一个单元

点击它进入详情页面,
让我们看下点击后执行的方法

showMovieDetail(movie) {
   this.props.navigator.push({
     title: movie.title,
     component: MovieDetail,
     passProps: { movie },
   });
 }

注意：

1: 使用了Navigator的push方法,改变了原有默认的initialRoute对象下的两个属性, title更改为你单击的电影的电影名, component 更改为电影详情组件MovieDetail,
2: Navigator.push() 还可以传值, 上面 passProps: { movie }就是把当前电影的信息传入到下个组件,
3: 如果你需要传入的movie中的id属性, 在下个组件可以这样调用, this.props.route.passProps.movie.id,

如果你想点击某一个按钮调回上一个页面时
使用navigator.pop()

<TouchableOpacity
  style={styles.touchbar}
  onPress={() => {this.props.navigator.pop()}}
>

官方还有很多方法中文网