reactNative的页面跳转
App中,android和ios都有页面跳转的功能。
reactNative中的页面跳转通过Navigator实现;
实现思路:
1.在reactNative启动时返回渲染一个Navigator,将路由route传入Navigator,
navigator作为props熟悉传入首页面HomePage
2.首页面导航栏切换时,将navigator作为属性传入到下一个页面,传入方式为
<MyPage {...this.props}/>
3.回退到上一组件页面
doBack=()={
//把任务栈顶部的任务清除
this.props.navigator.pop();
}
4.跳转到某个组件页面
gotoSortKey=()=>{
this.props.navigator.push(
component:SortKeyPage
);
}
5.重新跳转到某个页面组件,并且清空并重置路由栈
this.props.navigator.resetTo({
component:HomePage
});
navigator栈图:
实现代码:
setup.js:
export default function setup(){
class Root extends Component {
//Navigator是一个导航器,通过导航器可以实现在不同页面之间跳转
//Navigator会建立一个路由栈,它类似于安卓的任务堆栈
renderScene = (route,navigator)=>{
let Target = route.component;
//navigator对象作为属性值,传递到HomePage页面
//传参
//return <Target {...route.params} navigator={navigator}/>;
return <Target {...route.params} navigator={navigator}/>;
}
render() {
return <Navigator
initialRoute={{component : HomePage}}
renderScene={(route,navigator)=>this.renderScene(route,navigator)}
configureScene={route=>Navigator.SceneConfigs.FadeAndroid}/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
return <Root/>;
}
HomePage.js:
<TabNavigator.Item
selected={this.state.selectedTab === 'my'}
title="我的"
selectedTitleStyle={{color: '#63B8FF'}}
renderIcon={() =>
<Image style={styles.icon} source={require('../../res/images/ic_my.png')}/>}
renderSelectedIcon={() =>
<Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
onPress={() => this.setState({selectedTab: 'my'})}
>
{/*
把HomePage属性上的navigator对象,传递给MyPage
*/}
<MyPage {...this.props}/>
</TabNavigator.Item>
MyPage.js:
//分类排序
gotoSortKey = ()=>{
this.props.navigator.push({
component : SortKeyPage
});
}
render(){
return <View style={styles.container}>
<NavigationBar
title="我的"/>
<View style={{flexDirection:'column',alignItems:'center',marginTop:30}}>
<Text onPress={this.gotoCustomKey}>自定义分类</Text>
<Text onPress={this.gotoSortKey} style={{marginTop:20}}>分类排序</Text>
</View>
</View>;
}
SortKeyPage.js:
doBack = ()=>{ //把任务栈顶部的任务清除 this.props.navigator.pop(); } goHomePage=()=>{
//跳转到新的场景,并且重置整个路由栈 this.props.navigator.resetTo({ component:HomePage });}