react-native-router-flux组件的学习(1)

在youtube上看到这个组件的视频，感觉挺好用的.
这是一个导航组件，导航是app中比较重要的内容

super_simple-2.gif

github地址

直接跳转的用法，非常直观和简单。看代码，简单的注释一下

 //index.js 
 import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';  //引入两个组件
import PageTwo from './PageTwo';
//用scene这个组件来包裹要导航的组件，initial表示默认加载的
//组件，key的作用就是在路由中注册这个组件，后面要用到这个
//某个组件就用它的key 来代替它,component就是组件
//这个组件自带navbar，title就是navbar的名字
export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

下面是两个组件的代码，两个组件之间相互跳转

//PageOne.js 第一个组件

  import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
//Actions.pageTwo就是根据pageTwo的key来进行导航

export default class PageOne extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={Actions.pageTwo}>This is PageOne!
        //pageTwo中 Actions.PageOne就可以跳转到PageOne
</Text>
      </View>
    )
  }
}

---

如果要在导航中传递信息可以如下操作

 render() {
  const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'}); 
  return (
    <View style={{margin: 128}}>
      <Text onPress={goToPageTwo}>This is PageOne!</Text>
    </View>
  )
}
//pageTwo可以通过props接受传递内容 
<Text>{this.props.text}</Text>

---

这是简单的介绍，这个组件还可以完成tabview，modal,sidemenu等工作，相当的厉害。2600多颗星
我把视频放上来，英语的，基本不影响，可以到youtube观看，有英文字母

react-native-router-flux百度网盘下载地址 密码：xnrh
这是组件作者的教程