美文网首页
ReactNative跨平台开发Navigator组件导航功能

ReactNative跨平台开发Navigator组件导航功能

作者: 眞d諟厼m | 来源:发表于2017-02-20 14:43 被阅读0次

    importReact, { Component }from'react';

    import{

    AppRegistry,

    StyleSheet,

    Text,

    View,

    Navigator,

    TouchableOpacity

    }from'react-native';

    classFirstPageextendsComponent {

    pressPush() {

    varnextRoute= {

    component: SecondPage

    };

    this.props.navigator.push(nextRoute);

    }

    render() {

    return(

    点击推出下一级页面

    );

    }

    }

    classSecondPageextendsComponent {

    pressPop() {

    this.props.navigator.pop()

    }

    render() {

    return(

    点我跳回去

    );

    }

    }

    export default classLessonNavigatorextendsComponent {

    render() {

    varrootRoute= {

    component: FirstPage

    };

    return(

    initialRoute={rootRoute}

    configureScene={(route) => {

    returnNavigator.SceneConfigs.PushFromRight;

    }}

    renderScene={(route, navigator) => {

    varComponent= route.component;

    return(

    )

    }}

    />

    );

    }

    }

    conststyles= StyleSheet.create({

    flex: {

    flex:1,

    justifyContent:'center',

    alignItems:'center'

    },

    btn: {

    width:150,

    height:30,

    borderColor:'#0089FF',

    borderWidth:1,

    borderRadius:3,

    justifyContent:'center',

    alignItems:'center'

    }

    });

    相关文章

      网友评论

          本文标题:ReactNative跨平台开发Navigator组件导航功能

          本文链接:https://www.haomeiwen.com/subject/bfcewttx.html