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> ); } };