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>)
};

此时运行就可以看到下面的效果：