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