reactNative的页面跳转

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


}