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

Question

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

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

Answer 1

使用Navigator 或Modal 进入新页面。

Answer 2

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

1.在 render 方法中定义你的初始 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;

Answer 3

我发现@Mr Brown 的回答有点混乱，所以我基本上用代码重写了它——所以这里有一个基本示例，使用与 Android 和 iOS 兼容的Navigator：

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 4

根据official document，除了react navigation，native navigation和react native navigation提供跨平台多页面解决方案。而NavigatorIOS 提供了一个仅限 iOS 的组件。

另一个相关项目可以从React Native Router找到。