react-native-router-flux（簡單應用）

安裝

建立項目;而且安裝上 react-native-router-flux 包

react-native init ReactNativeRouterFluxDemo cd ReactNativeRouterFluxDemo npm install --save react-native-router-flux

 

而後創建個存放js的目錄，咱們這裏就叫app，做爲 ios 和Android的公用目錄

mkdir app

先來建立個簡單的頁面

// app/index.js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to the Demo! </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, }); export default App; 

在 index.android.js 或者 index.ios.js 寫入以下內容：

// index.ios.js // index.android.js import { AppRegistry } from 'react-native'; import App from './app'; AppRegistry.registerComponent('ReactNativeRouterFluxDemo', () => App); 

好了。先跑起來看眼。

first

頁面之間的跳轉

剛剛咱們只是創建了一個簡單的頁面。咱們如今須要作的是，新建兩個頁面，實現互相之間的跳轉。
分別就創建 ScarletScreen.js 和 GrayScreen.js，下面代碼就只是給出紅色的了。灰色就改改 text,component name,backgroundColor 就行。

// app/ScarletScreen.js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; const ScarletScreen = () => { return ( <View style={styles.container}> <Text style={styles.welcome}> Scarlet Screen </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#bb0000', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: '#ffffff', }, }); export default ScarletScreen; 

好了，咱們創建好兩個頁面了。而後要實現頁面的跳轉，引入咱們文章重點吧。react-native-router-flux.直接看咱們修改的app/index.js

// app/index.js import React, { Component } from 'react'; import { Router, Scene } from 'react-native-router-flux';//引入包 import ScarletScreen from './ScarletScreen'; //引入文件 import GrayScreen from './GrayScreen';//引入文件 const App = () => { return ( <Router> <Scene key="root"> <Scene key="scarlet" component={ScarletScreen} title="Scarlet" initial /> <Scene key="gray" component={GrayScreen} title="Gray" /> </Scene> </Router> ); } export default App; 

這裏咱們作的就是 把 react-native-router-flux 包引入，在引入兩個定義好的頁面。
而後下面就是 <Router>標籤了。這裏約定了全部的頁面都要在root下。
root 下的標籤就是咱們實際要顯示的內容了。
這裏注意，key得是惟一的。至關於給這個頁面一個名稱。當咱們須要跳轉到某個頁面的時候就能夠直接調用Actions.key();下面咱們來修改一下 app/ScarletScreen.js

// app/ScarletScreen.js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Actions } from 'react-native-router-flux'; // New code const ScarletScreen = () => { return ( <View style={styles.container}> <Text style={styles.welcome} onPress={() => Actions.gray()} // New Code > Scarlet Screen </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#bb0000', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: '#ffffff', }, }); export default ScarletScreen; 

上面代碼註明了新加的內容。如今跑起來看看吧。

兩個頁面跳轉

好了。到這裏咱們兩個頁面的跳轉就完成了，這裏能夠參看下這篇官方文章MINI_TUTORIAL

原文連接：https://www.jianshu.com/p/65ec0a44286c