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)