如何在反應本機中執行多頁面應用程序？

Question

用於react-native的tutorial向我們展示瞭如何呈現單頁應用程序，方法是創建一個具有以應用程序命名的render()方法的React「Class」，並使用所有呈現邏輯。

這基本上呈現一個頁面。如果我有幾個截然不同的頁面呢？我應該創建這個「應用程序」，並根據用戶所在的頁面在渲染方法中有效地使用switch語句，或者...有更好/內置的頁面切換方法嗎？

Answer 1

使用Navigator或Modal進入一個新頁面。

Answer 2

導航器是我用來解決這個問題的組件。

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; 

Answer 3

我發現@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} /> 
 
    ); 
 
    } 
 
});

的代碼應該是不言自明。如果您不明白某事，請告訴我。

Answer 4

根據official document，除了react navigation,native navigation和react native navigation提供了跨平臺的多頁面解決方案。 NavigatorIOS提供了一個僅iOS的組件。

另一個相關項目可以從React Native Router找到。