react-native - 如何用react-native做一个多页面应用程序？

Question

tutorial for React-native 向我们展示了如何通过创建一个 React“类”来渲染单页应用程序，该类具有以应用程序命名的 render() 方法以及所有渲染逻辑。

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

Answer 1

Navigator 是我用来解决这个问题的组件。

<强>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 方法中定义您想要访问的其他站点/ View /页面:

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

<强>3。在 Splash 类中，您可以看到如何在本例中 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;