React Native react-navigation

什么是react-navigation?
react-native从开源至今，一直存在几个无法解决的毛病，偶尔就会复发让人隐隐作痛，提醒你用的不是原生，其中包括列表的复用问题，导航跳转不流畅的问题等等。终于facebook坐不住了，在前一段时间开始推荐使用react-navigation，并且在0.44发布的时将之前一直存在的Navigator废弃了。react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。虽然现在功能还不完善，但基本是可以在项目中推荐使用的。
属性
react-navigation分为三个部分。StackNavigator类似顶部导航条，用来跳转页面和传递参数。TabNavigator类似底部标签栏，用来区分模块。DrawerNavigator抽屉，类似从App左侧滑出一个页面，在这里不做讲解。下面会分开讲解官网提供的配置方法，但顺序可能会官网不一样。
测试TabNavigator、StackNavigator和DrawerNavigator
StackNavigator
StackNavigator 组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs
RouteConfigs 参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。
const StackRouteConfigs = {    Tab: {        screen: Tab,    }};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
其中tab是导航栏，tab将作为一个路由在stacknavigation中配置，tab中的routeconfigs 包含了 各个导航中的页面，
StackNavigatorConfig
StackNavigatorConfig 参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：
const StackNavigatorConfigs = {    initialRouteName: 'Tab',    navigationOptions: {        title: '标题',        headerStyle: {backgroundColor: '#5da8ff'},        headerTitleStyle: {color: '#333333'},    }

页面的配置选项 navigationOptions 通常还可以在对应页面中去静态配置，比如在 HomePage 页面中：
class App extends Component {   static navigationOptions={       title: '首页',//设置标题内容       header:{           backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）       }   }

同样地，在页面里面采用静态的方式配置 navigationOptions 中的属性，会覆盖 StackNavigator 构造函数中两个参数 RouteConfigs 和 StackNavigatorConfig 配置的 navigationOptions 里面的对应属性。 navigationOptions 中属性的优先级是：
页面中静态配置 > RouteConfigs > StackNavigatorConfig
有了 RouteConfigs 和 StackNavigatorConfig 两个参数，就可以构造出一个导航器组件 StackNavigator ，直接引用该组件：

const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);export default class MainComponent extends Component {    render() {        return (            <Navigator/>        )    };}
 
已经配置好导航器以及对应的路由页面了，但是要完成页面之间的跳转，还需要 navigation。
navigation
在导航器中的每一个页面，都有 navigation 属性，该属性有以下几个属性/方法：
navigate - 跳转到其他页面state - 当前页面导航器的状态setParams - 更改路由的参数goBack - 返回dispatch - 发送一个action
 

navigete
调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数：
— routeName 导航器中配置的路由名称— params 传递参数到下一个页面— action action比如： this.props.navigation.navigate('Find', {param: 'i am the param'});

export  default class Homescreen extends Component{    render(){        const {navigate}=this.props.navigation;        return(            <View style={styles.container}>                <Text style={{padding:10}}>Hello, Navigation!</Text>                <Button                    onPress={() => navigate('Chat',{user:'Sybil'})}                    title="点击跳转"/>            </View>        )    }}
state
state 里面包含有传递过来的参数 params 、 key 、路由名称 routeName ，打印log可以看得到：
{   params: { param: 'i am the param' },  key: 'id-1500546317301-1',  routeName: 'Mine' }
render() {    const {params,key,routeName} = this.props.navigation.state;    return (        <View style={{backgroundColor:'#fff',flex:1}}>            <Text style={{padding:20}}>Chat with {params.user}{key}{routeName}</Text>        </View>    );
 
setParams
更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题。
componentDidMount() {    this.props.navigation.setParams({param:'i am the new param'})}
 
goBack
回退，可以不传，也可以传参数，还可以传 null 。
this.props.navigation.goBack();       // 回退到上一个页面this.props.navigation.goBack(null);   // 回退到任意一个页面this.props.navigation.goBack('Home'); // 回退到Home页面

TabNavigator
TabNavigator ，即是Tab选项卡，类似于原生 android 中的 TabLayout ，它的构造函数：
TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs
路由配置和 StackNavigator 中是一样的，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项：
const TabRouteConfigs = {    Home: {        screen: Homescreen,        navigationOptions: ({navigation}) => ({            tabBarLabel: '首页',            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>        }        ),    },    NearBy: {        screen: NearByScreen,        navigationOptions: {            tabBarLabel: '附近',            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>        }    }    ,    Mine: {        screen: MineScreen,        navigationOptions: {            tabBarLabel: '我的',            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>        }    }};

TabNavigatorConfig
这个参数用来配置 选项卡的数据
比如
initialRouteName - 初始显示的Tab对应的页面路由名称
tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。TabBarTop - 在页面的顶部TabBarBottom - 在页面的底部
tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值
lazy - 是否懒加载页面
const TabNavigatorConfigs = {    initialRouteName: 'Home',    tabBarComponent: TabBarBottom,    tabBarPosition: 'bottom',    lazy: true,};