reactnative Navigator api解释

最新推荐文章于 2022-10-09 16:17:02 发布

原创最新推荐文章于 2022-10-09 16:17:02 发布 · 422 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个React Native应用程序中实现导航的具体方法，包括配置初始页面、设置页面跳转动画及参数传递等。文中详细展示了如何使用Navigator组件进行页面间的跳转，并自定义导航栏按钮和标题。

  demogithub 地址  https://github.com/SpikeKing/WclNavigator.git

<Navigator
      style={{flex:1}}
      initialRoute={{name: 'FirstPage', component: FirstPage}}//配置 路由 第一页模板
      configureScene={this.configureScene} //位置跳转动画
      renderScene={this.renderScene} 
      navigationBar={
<Navigator.NavigationBar
  style={styles.navContainer}
  routeMapper={NavigationBarRouteMapper}/>}
  />
configureScene(route, routeStack) { //根据 route type决定 跳转的样式
    if (route.type == 'Modal') {
        return Navigator.SceneConfigs.FloatFromBottom;
    }
    return Navigator.SceneConfigs.PushFromRight;
}

gotoNext(name, type = 'Normal') {
	//将参数传递个下一页 
    this.props.navigator.push({
        component: SecondPage,
        passProps: {
            id: name
        },
        onPress: this.onPress,
        rightText: 'ALERT!',
        type: type
    }) 
}
class SecondPage extends Component {
onPress={()=>this.props.navigator.pop()}
//返回上一页

}
renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;//表明可以动态传递参数
}
this.props.navigator.push({ //即通过这样传递
    component: SecondPage,
    passProps: {
        id: name
    },
    onPress: this.onPress,
    rightText: 'ALERT!',
    type: type
})
<Navigator.NavigationBar
  style={styles.navContainer}
  routeMapper={NavigationBarRouteMapper}/>}
  />
导航的 Mapper 使用 
var NavigationBarRouteMapper = {
    // 左键
    LeftButton(route, navigator, index, navState) {
        if (index > 0) {
            return (
                <View style={styles.navContainer}>
                    <TouchableOpacity
                        underlayColor='transparent'
                        onPress={() => {if (index > 0) {navigator.pop()}}}>//判断 每次页面索引 
                        <Text style={styles.leftNavButtonText}>
                            后退
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return null;
        }
    },
    // 右键
    RightButton(route, navigator, index, navState) { //其中route(跳转时传递的参数)每次 都是 跳转 都会调用
        if (route.onPress)
            return (
                <View style={styles.navContainer}>
                    <TouchableOpacity
                        onPress={() => route.onPress()}>
                        <Text style={styles.rightNavButtonText}>
                            {route.rightText || '右键'}
                        </Text>
                    </TouchableOpacity>
                </View>
            );
    },
    // 标题
    Title(route, navigator, index, navState) {
        return (
            <View style={styles.navContainer}>
                <Text style={styles.title}>
                    应用标题
                </Text>
            </View>
        );
    }
};