如何在react-native中执行多页面应用程序？

Question

该教程的反应母语向我们展示了如何使一个单页的应用程序,通过创建一个响应"类",有一个render()应用程序命名的方法,所有的渲染逻辑.

这基本上呈现一个页面.如果我有一些相当不同的页面怎么办？我应该创建这个"app",并根据用户所在的页面有效地在render方法中使用switch语句,或者......是否有更好的/内置的方式在页面之间切换？

Answer 1

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

1.在render方法中定义初始Route和general属性:

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;

Answer 2

我发现@Mr Brown的答案有点令人困惑,所以我基本上用代码重写了 - 所以这是一个Navigator与Android和iOS兼容的基本示例:

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene} />
    );
  }
});

代码应该是不言自明的.如果你不明白,请告诉我.

Answer 3

使用导航器或模态框进入新页面。