react-native 路由 react-native-router-flux

引言

react-native-router-flux 是一個基於 react-navigation 路由框架，進一步簡化了頁面跳轉的步驟，並且一直隨着 react-navigation升級更新版本。而且使用這個框架的話，可以將全部的頁面跳轉的處理邏輯都寫在一個地方，方便了后續的維護。

先來個簡單的demo

如何導入 react-native-router-flux 這個可以看官網，這里我就直接上代碼了：

const Root = () => {
  return (
    <Router>
      {/* 這種寫法是將全部的跳轉頁面都放在Root下面 */}
      <Scene key="root">
        {/* key 就是給頁面的標簽,供Actions使用 */}
        {/* component 設置關聯的頁面 */}
        {/* title 就是給頁面標題 */}
        {/* initial 就是設置默認頁面*/}
        <Scene
          key="one"
          component={PageOne}
          title="PageOne"
          initial={true}
        />
        <Scene key="two" component={PageTwo} title="PageTwo" />
      </Scene>
    </Router>
  );
};

PageOne 的核心代碼，點擊 Text 跳轉到下一個頁面：

//導入Action的包,處理頁面跳轉
import { Actions } from 'react-native-router-flux'; 

const PageOne = () => {
  return (
    <View style={styles.container}>
      <Text
        style={styles.welcome}
        onPress={()=>Actions.two()}
      >
        我是Page One
      </Text>
    </View>
  );
};

PageTwo 的核心代碼：

export default class PageTwo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>我是Page Two </Text>
      </View>
    )
  }
}

數據傳遞與刷新

頁面之間的切換自然不會缺少數據的傳遞，而且這個路由框架可以實時 refresh 當前頁面。

先看頁面之間傳遞數據吧，這里添加一個 PageThree 吧：

import {Actions} from "react-native-router-flux"

const PageThree = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}
        //Actions.pop是退回到上一層
        onPress={() => Actions.pop({
          //refresh用於刷新數據
          refresh: {
            data: '從 three 回到 two'
          }
        })}
      >我是Page Three </Text>
    </View>
  );
};

很自然的，PageTwo 也要修改一下代碼：

import {Actions} from 'react-native-router-flux'; // New code

export default class PageTwo extends Component {
  render() {
    const data = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          //添加點擊事件並傳遞數據到PageThree
          onPress={() => Actions.three({data: "從 two 傳遞到 three"})}
        >我是Page Two </Text>
       <Text style={styles.refresh}
        //展示從PageThree傳回來的數據
        >refresh:{data}</Text>
      </View>
    )
  }
}

最后到 Root.js 添加新的 Scence :

const Root = () => {
  return (
    <Router>
      <Scene>
        //...........
        <Scene
          key="three"
          component={PageThree}
          title="PageThree"
        />
      </Scene>
    </Router>
  );
};

可以看到從 PageThree 回到 PageTwo 數據傳遞並刷新頁面的效果，不過如果需要實時刷新當前頁面呢？這時就需要使用 Actions.refresh 方法了：

export default class PageTwo extends Component {
  render() {
    const data = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          onPress={() => Actions.three({data: "從 two 傳遞到 three"})}
        >我是Page Two </Text>
        <Text
          style={styles.refresh}
          onPress={() => Actions.refresh({
            data: 'Changed data',
          })}
        >refresh:{data}</Text>
      </View>
    )
  }
}

 

Tab Scene

通過設置 Scene 屬性的 Tabs 可以設置 Tabs 。這個也開發中經常用到的頁面效果

//設置tab選中時的字體顏色和標題
const TabIcon = ({focused , title}) => {
  return (
    <Text style={{color: focused  ? 'blue' : 'black'}}>{title}</Text>
  );
};

const Root = () => {
  return (<Router>
    {/*tabBarPosition設置tab是在top還是bottom */}
    <Scene hideNavBar tabBarPosition="bottom">
      <Tabs
        key="tabbar"
        swipeEnabled
        wrap={false}
        // 是否顯示標簽欄文字
        showLabel={false}
        tabBarStyle={{backgroundColor: "#eee"}}
        //tab選中的顏色
        activeBackgroundColor="white"
        //tab沒選中的顏色
        inactiveBackgroundColor="red"
      >
        <Scene
          key="one"
          icon={TabIcon}
          component={PageOne}
          title="PageOne"
        />

        <Scene
          key="two"
          component={PageTwo}
          title="PageTwo"
          icon={TabIcon}
        />

        <Scene
          key="three"
          component={PageThree}
          title="PageThree"
          icon={TabIcon}
        />
      </Tabs>
    </Scene>
  </Router>)
};

此時運行就可以看到下面的效果：