天天看点

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

引言

react-native-router-flux 是一个基于 react-navigation 路由框架,进一步简化了页面跳转的步骤,并且一直随着 react-navigation升级更新版本。而且使用这个框架的话,可以将全部的页面跳转的处理逻辑都写在一个地方,方便了后续的维护。

如何导入 react-native-router-flux 这个可以看官网,这里我就直接上代码了:

<code>pageone</code> 的核心代码,点击 <code>text</code> 跳转到下一个页面:

<code>pagetwo</code> 的核心代码:

页面之间的切换自然不会缺少数据的传递,而且这个路由框架可以实时 <code>refresh</code> 当前页面。

先看页面之间传递数据吧,这里添加一个 <code>pagethree</code> 吧:

很自然的,<code>pagetwo</code> 也要修改一下代码:

最后到 <code>root.js</code> 添加新的 <code>scence</code> :

可以看到从 <code>pagethree</code> 回到 <code>pagetwo</code> 数据传递并刷新页面的效果,不过如果需要实时刷新当前页面呢?这时就需要使用 <code>actions.refresh</code> 方法了:

通过设置 <code>scene</code> 属性的 <code>tabs</code> 可以设置 tabs 。这个也开发中经常用到的页面效果

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

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