react-navigation学习笔记

• screenProps全局传参

<App
  screenProps={/* 这个属性将通过 this.props.screenProps 来调用*/}
/>

尤其是在判断屏幕旋转事件时，将状态保存在app的入口screen中，可以在后面所有的子页面中调用。

• drawerLockMode关闭测滑打开DrawerNavigator的事件，只允许点击展开关闭

  const LeftPage = DrawerNavigator({
   HomeLeft: {
   screen: IndexApp,
   navigationOptions: {
     drawerLabel: '首页',
     drawerLockMode: 'locked-closed'
   }
  }})

• DrawerNavigator的DrawerItems的onItemPress的使用

const CustomDrawerContentComponent = (props,route) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...{...props,onItemPress:(route)=>{props.navigate(route.routeName)}}} />
    </SafeAreaView>
  </ScrollView>
);

• DrawerNavigation要用在最外层，要是用在stackNavigator中，会在标题栏的下面显示

• 传参

this.props.navigation.navigate('Chat', { user:  'Lucy' });

获取参数值

this.props.navigation.state.params.user

修改参数

this.props.navigation.setParams({ user: 'Lily' });

• 页面跳转

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)

• 返回

goBack() //从HomeScreen返回
goBack(null) //返回上一页
goBack('screen') //从screen页面返回前一页