react-native-router-flux 是一个基于 react-navigation 路由框架,进一步简化了页面跳转的步骤,并且一直随着 react-navigation 升级更新版本。而且使用这个框架的话,可以将全部的页面跳转的处理逻辑都写在一个地方,方便了后续的维护。
先来个简单的demo
如何导入 react-native-router-flux 这个可以看官网,这里我就直接上代码了:
import {Router, Scene} from "react-native-router-flux";
import PageOne from "./Component/PageOne";
import PageTwo from "./Component/PageTwo";
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