RN-Nav跳转

rn-nav跳转

tabbar隐藏问题

• 可以通过设置navigationOptions中的tabBarVisible属性来控制某个页面

  export default createBottomTabNavigator(
    {
      Home:nav1,
      Mine: nav2
    },
    {
      // tabbar 配置
      navigationOptions: ({ navigation }) => ({
  
    // 只在第一级页面显示tabbar
        tabBarVisible: navigation.state.index>0 ? false:true,
        tabBarIcon: ({ tintColor,focused }) => {
            ...
        }
       }
  

• 可以通过新的 Stack Navigator 作为 Tab Navigator 的父级, 这样不会反复设置tabbar的hidden，show

  const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Details: DetailsScreen
  });
  
  export const MainStack = createStackNavigator({
    // tabbar
    Tabs: TabNavigator,
    // 路由页面
    Details: DetailsScreen,
    Mine: MineScreen
  },{
    initialRouteName:'Tabs'
  });
  

页面传值

• 上级页面传递下级页面，可以通过push携带object，只页面通过getParam获取。

  // 上级
  <Button
            title = "jump to Mine"
            onPress={() => this.props.navigation.push('Details',{
              id:1
            })}
   />
  
  // 下级
  let cusId = navigation.getParams('id', 'cusId')
  

• 下级页面向上级页面传值，可以通过closure，或者调用function的方式

  // 上级
  callFunc(v) {
    console.log(v)
  }
  render() {
     ... 
     <Button
            title = "jump to Mine"
            onPress={() => this.props.navigation.push('Details',{
              id:1,
              call:(callData)=>{
                 console.log(callData)
              },
              call2:callFunc
            })}
   />
  }
  
  // 下级
  const {state} this.props.navigation
  let params = {params:"calldata"}
  state.params.call(parmas)
  state.params.call2(params)