如何做一个多页面应用程序的反应本机？

发布时间：2020-12-15 06:29:06 所属栏目：百科来源：网络整理

导读：tutorial for react-native向我们展示了如何通过创建一个具有所有渲染逻辑的应用程序后面的render()方法的React“Class”来渲染单页应用程序。这基本上呈现一个页面。如果我有几个相当不同的页面怎么办？我应该创建这个“应用程序”，并根据用户所在的页面

tutorial for react-native向我们展示了如何通过创建一个具有所有渲染逻辑的应用程序后面的render()方法的React“Class”来渲染单页应用程序。

这基本上呈现一个页面。如果我有几个相当不同的页面怎么办？我应该创建这个“应用程序”，并根据用户所在的页面，在render方法中有效地设置switch语句，或者…是否有更好的/内置的方式在页面之间切换？

导航器是我用来解决这个问题的组件。

1.在渲染方法中定义您的初始路由和常规属性：

class MyApp extends React.Component {

render () {
    return (
        <Navigator
            initialRoute={{id: 'SplashPage',name: 'Index'}}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route) => {
        if (route.sceneConfig) {
          return route.sceneConfig;
        }
        return Navigator.SceneConfigs.VerticalDownSwipeJump;
      }}/>
    );
   }
}

2.然后，您需要在renderScene方法中定义要进入的其他站点/视图/页面：

renderScene ( route,navigator ) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
        return (
            <SplashPage
                navigator={navigator}/>
        );
    }
    if (routeId === 'LoginPage') {
        return (
            <LoginPage
                navigator={navigator}/>
        );
    }
}
}

3.在Splash Class中，您将看到如何在本例中路由到下一个页面，并在下面的代码中结束了2秒：(我认为如果会有一些像ReplaceWith这样的东西，而不是仅仅替换，但是不介意：P)

class SplashPage extends Component {
componentWillMount () {
    var navigator = this.props.navigator;
    setTimeout (() => {
        navigator.replace({
            id: 'LoginPage',});
    },2000);
}

render () {
    return (
        <View style={{flex: 1,backgroundColor: 'red',alignItems: 'center',justifyContent: 'center'}}>
            <Image style={{position: 'absolute',left: 0,top: 0,width: windowSize.width,height: windowSize.height}} source={require('image!splash_screen')}></Image>
        </View>
    );
}
}

module.exports = SplashPage;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!