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

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;

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

猜你在找的React相关文章