有这样一个组件 他可以控制页面跳转 返回，在移动端叫做导航控制器， 在RN中叫路由
我们使用的 react-native-navigation 是一个开源组件库
介绍：A complete native navigation solution for React Native - nav bars, tabs, drawer, modals
这个组件库的功能很强大，涵盖了类似底部导航的TabNavigator ，屏幕上方导航栏 StackNavigator以及抽屉效果的DrawerNavigator
1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏
2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏
3.DrawerNavigator：抽屉效果，左侧滑出这种效果。
React-navigation之StackNavigator
这里我们学习使用一下StackNavigator来实现页面跳转
首先安装这个库，在我们项目的根目录下
命令行执行：npm install --save react-navigation
导入：
import {
StackNavigator,
} from 'react-navigation';
接下来定义路由栈：
里面有两个组件
第一个页面 电影列表页，Main
第二个页面 电影详情页 Detail。
分别用Main和Detail表示。
const App = StackNavigator({
Main: {screen: MovieList, navigationOptions: {
title: "推荐电影",
headerLeft: null,
headerStyle:{
elevation: 0
},
headerTitleStyle:{ alignSelf:'center'},
},},
Detail: {screen: MovieDetail,
navigationOptions:({navigation,screenProps}) =>({
headerTitle: navigation.state.params.info,
}
)
},
});
在电影列表页 ，点击某一个电影 ，跳转到具体的详情页
onPress={() => this.props.navigation.navigate('Detail',{info:movie.title})}
在电影详情页，通过this.props.navigation.state 获取传递过去的title，并展示出来。
/**
* 电影详情页
*/
'use strict'
import React, {Component} from 'react';
import styles from '../Styles/Main';
import {
Text,
View,
} from 'react-native';
export default class MovieDetail extends Component{
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state
return (
<View>
<Text style ={styles.Text}>{params.info}</Text>
</View>
);
}
}
效果展示：
关于 Navigation 的使用参考
官网介绍：
https://reactnavigation.org/docs/intro/ Hello Mobile Navigation
https://reactnavigation.org/docs/navigators/stack
react-navigation使用技巧：
http://www.jianshu.com/p/2f575cc35780
React-navigation之StackNavigator：
http://blog.****.net/lu1024188315/article/details/73550028
-----------------------------期待大神们的到来
------------------------一---起分享，一起进步！需要你们