如何在反应本机中执行多页面应用程序？

问题描述：

用于react-native的tutorial向我们展示了如何呈现单页应用程序，方法是创建一个具有以应用程序命名的render()方法的React“Class”，并使用所有呈现逻辑。如何在反应本机中执行多页面应用程序？

这基本上呈现一个页面。如果我有几个截然不同的页面呢？我应该创建这个“应用程序”，并根据用户所在的页面在渲染方法中有效地使用switch语句，或者...有更好/内置的页面切换方法吗？

答

使用Navigator或Modal进入一个新页面。

答

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

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方法：

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

3.在闪类，你怎么看你的路由到下一个页面，只要在本实例2秒以上与FOL降脂代码：（我认为这将是更好，如果有会是这样的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;

感谢您的详细示例！ – GreenAsJade

没有问题的队友，希望它的作品！ – BigPun86

救了一天！谢啦！ –

答

我发现@Mr布朗的回答是有点混乱，所以我基本上与代码重写了它 - 所以这里使用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} /> 
 
    ); 
 
    } 
 
});

的代码应该是不言自明。如果您不明白某事，请告诉我。

怎么了styles.container对象？样式是应该在什么地方定义的？我运行时会导致错误。 – jcollum

@jcollum是的 - 你应该定义'var styles = ...'，如下所示：https：//facebook.github.io/react-native/docs/stylesheet.html –

答

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

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

如何在反应本机中执行多页面应用程序？

相关推荐