react-native 基礎(chǔ)：react-native-router-flux 的使用
這篇文章主要說明 react-native-router-flux 的實(shí)際使用了。資料來源：
API_CONFIGURATION;
React Native Basics: Using react-native-router-flux
安裝
創(chuàng)建項(xiàng)目;并且安裝上 react-native-router-flux 包
react-native init ReactNativeRouterFluxDemo
cd ReactNativeRouterFluxDemo
npm install --save react-native-router-flux
然后建立個存放js的目錄，我們這里就叫app，作為 ios 和Android的公用目錄
mkdir app
先來創(chuàng)建個簡單的頁面
// 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 寫入如下內(nèi)容：
// index.ios.js
// index.android.js
import { AppRegistry } from 'react-native';
import App from './app';
AppRegistry.registerComponent('ReactNativeRouterFluxDemo', () => App);
好了溉知。先跑起來看眼。
頁面之間的跳轉(zhuǎn)
剛剛我們只是建立了一個簡單的頁面刻撒。我們現(xiàn)在需要做的是什湘，新建兩個頁面，實(shí)現(xiàn)互相之間的跳轉(zhuǎn)赎离。
分別就建立 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;
好了，我們建立好兩個頁面了憾朴。然后要實(shí)現(xiàn)頁面的跳轉(zhuǎn)狸捕，引入我們文章重點(diǎn)吧喷鸽。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>標(biāo)簽了做祝。這里約定了所有的頁面都要在root下砾省。
root 下的標(biāo)簽就是我們實(shí)際要顯示的內(nèi)容了。
這里注意混槐，key得是唯一的编兄。相當(dāng)于給這個頁面一個名稱。當(dāng)我們需要跳轉(zhuǎn)到某個頁面的時候就可以直接調(diào)用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;
上面代碼注明了新加的內(nèi)容∩牵現(xiàn)在跑起來看看吧狠鸳。
好了。到這里我們兩個頁面的跳轉(zhuǎn)就完成了悯嗓，這里可以參看下這篇官方文章MINI_TUTORIAL
建立 Tabs
在tab的演示中件舵，我們建更多背景顏色的頁面來方便參照。和上面兩個頁面的內(nèi)容是一樣的脯厨，僅修改顏色铅祸，名字做出區(qū)別，這里我傳了份代碼到 oschina git 上合武，可以直接拉一下临梗。
我們?yōu)轫?xiàng)目建立3個tab,將幾個頁面引入tab中實(shí)現(xiàn)點(diǎn)擊tab跳轉(zhuǎn)到對應(yīng)的頁面。
// app/index.js
// Removed for brevity
const TabIcon = ({ selected, title }) => {
return (
<Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
);
}
const App = () => {
return (
<Router>
<Scene key="root">
{/* Tab Container */}
<Scene
key="tabbar"
tabs={true}
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
{/* Removed for brevity */}
</Scene>
</Scene>
</Router>
);
}
