react-native-router-flux 組件使用詳解(一)

react-native-router-flux組件基礎使用教程分爲一二兩部分教程。教程一主要講解router-flux的使用方式，教程二主router-flux官方提供的各類API。

react-native-router-flux實戰詳解(二)

Demo示例

github.com/guangqiang-…

特色

在使用過程當中，跟react-native提供的navigator的區別是你不須要擁有navigator對象。你能夠在任意地方使用簡單的語法去控制scene的切換，如：Actions.login({username, password}) or Actions.profile({profile}) or 甚至 Actions.profile(123)

全部的參數都將被注入到this.props中給Sene組件使用

經常使用功能介紹

• 正向跳轉
• 正向跳轉並傳值
• 反向跳轉
• 反向跳轉並傳值
• 指定頁面跳轉
• 指定頁面跳轉並傳值

正向跳轉

假設情景：從Home頁跳轉到Profile頁面，Profile場景的key值爲profile

• 不帶參數 onPress={() => {Actions.proflie()}}
• 帶參數onPress={() => {Actions.proflie({key: value})}}

在Profile界面接收參數：this.props.key

反向跳轉

假設情景：從Profile頁返回Home頁面

• 返回上一頁面，不帶參數Actions.pop()
• 返回上一頁面，帶參數Actions.pop({refresh: ({key: value})})
• 指定回退頁面數Actions.pop({popNum: 2})
• 指定回退頁面數，帶參數Actions.pop({popNum: 2, refresh:({key: value})})
• 返回指定頁面Actions.popTo('home')

注意

• refresh是框架自帶函數，可用於刷新屬性（props）
• Actions.pop({refresh: ({key: value})}) // 用於刷新回退到的頁面的屬性
• Actions.refresh('params') // 用於刷新當前頁面的屬性對應回退頁面刷新屬性，即接受傳遞的參數

如何使用

• npm i react-native-router-flux --save

• 在你的index.js級別的文件中使用Scene組件定義你的scenes，而且Scene組件做爲Router的子節點。由於後面Scene將由Router來控制其行爲。

import {Scene, Router} from 'react-native-router-flux'

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      </Scene>
    </Router>
  }
}

// 或者，在編譯期定義你全部的scenes，並在後面的Router裏面使用

import {Actions, Scene, Router} from 'react-native-router-flux'

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login"/>
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  </Scene>
)

class App extends React.Component {
  render() {
    return <Router scenes={scenes}/>
  }
}

複製代碼

• 定義好以後，在任意地方經過導入 import {Actions} from 'react-native-router-flux' 得到Actions 對象，Actions對象將是咱們操做Scenes的遙控器。經過Actions咱們能夠向Router發出動做讓Router控制Scene變化。

更多文章

• 做者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！

小夥伴們掃下方二維碼加入RN技術交流QQ羣