Question

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

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

Answer 1

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

<强> 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中，您将看到如何在此示例中使用以下代码完成路由到下一页：（我认为如果有类似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

使用Navigator或Modal输入新页面。

Answer 4

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

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

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

4 个答案: