react-native 基礎(chǔ)：react-native-router-flux 的使用

這篇文章主要說明 react-native-router-flux 的實際使用了。資料來源：

API_CONFIGURATION;
React Native Basics: Using react-native-router-flux

安裝

創(chuà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);

好了。先跑起來看眼。

first

頁面之間的跳轉(zhuǎn)

剛剛我們只是建立了一個簡單的頁面。我們現(xiàn)在需要做的是，新建兩個頁面，實現(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;

好了，我們建立好兩個頁面了。然后要實現(xiàn)頁面的跳轉(zhuǎ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>標簽了。這里約定了所有的頁面都要在root下。
root 下的標簽就是我們實際要顯示的內(nèi)容了。
這里注意，key得是唯一的。相當于給這個頁面一個名稱。當我們需要跳轉(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)容?，F(xiàn)在跑起來看看吧。

兩個頁面跳轉(zhuǎn)

好了。到這里我們兩個頁面的跳轉(zhuǎn)就完成了，這里可以參看下這篇官方文章MINI_TUTORIAL

建立 Tabs

在tab的演示中，我們建更多背景顏色的頁面來方便參照。和上面兩個頁面的內(nèi)容是一樣的，僅修改顏色，名字做出區(qū)別，這里我傳了份代碼到 oschina git 上，可以直接拉一下。
我們?yōu)轫椖拷?個tab,將幾個頁面引入tab中實現(xià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>
  );
}

tab頁面跳轉(zhuǎn)