如何在 react-native 中做一个多页应用程序? [英] How to do a multi-page app in react-native?

问题描述

react-native 的 教程 向我们展示了如何渲染一个单页应用，通过创建一个 React类"，它有一个以应用命名的 render() 方法，以及所有的渲染逻辑.

The tutorial for react-native shows us how to render a single-page app, by creating a React "Class" that has a render() method named after the app, with all rendering logic.

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

This basically renders a page. What if I have a few rather distinct pages? Should I create this "app", and effectively have a switch statement in the render method depending upon what page the user is on, or ... is there a better/built-in way to switch between pages?

推荐答案

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

Navigator is the component i use to solve this.

1.在渲染方法中定义您的初始 Route 和一般属性:

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-native 中做一个多页应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！