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

};

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

巴特西

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

先来个简单的demo

数据传递与刷新

Tab Scene

最新文章

热门文章