react-native-router-flux(簡單應用)
阿新 • • 發佈:2018-02-08
lex app turn rom pos dir ber round ans
原文鏈接:https://www.jianshu.com/p/65ec0a44286c
安裝
創建項目;並且安裝上 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
react-native-router-flux(簡單應用)