React-Native进阶_5.导航 Naviagtion

有这样一个组件 他可以控制页面跳转 返回，在移动端叫做导航控制器， 在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.csdn.net/lu1024188315/article/details/73550028

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们

源码下载