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 就是设置默认页面*/}<Scenekey="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}><Textstyle={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 codeexport default class PageTwo extends Component {render() {const data = this.props.data || "null";return (<View style={styles.container}><Textstyle={styles.welcome}//添加点击事件并传递数据到PageThreeonPress={() => 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>//...........<Scenekey="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}><Textstyle={styles.welcome}onPress={() => Actions.three({data: "从 two 传递到 three"})}>我是Page Two </Text><Textstyle={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"><Tabskey="tabbar"swipeEnabledwrap={false}// 是否显示标签栏文字showLabel={false}tabBarStyle={{backgroundColor: "#eee"}}//tab选中的颜色activeBackgroundColor="white"//tab没选中的颜色inactiveBackgroundColor="red"><Scenekey="one"icon={TabIcon}component={PageOne}title="PageOne"/><Scenekey="two"component={PageTwo}title="PageTwo"icon={TabIcon}/><Scenekey="three"component={PageThree}title="PageThree"icon={TabIcon}/></Tabs></Scene></Router>)
};

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

转载于:https://www.cnblogs.com/crazycode2/p/9395984.html