react-native 路由 react-native-router-flux
先来个简单的demo
RN官方路由: https://reactnavigation.org
如何导入 react-native-router-flux 这个可以看官网,这里我就直接上代码了:
实例:https://github.com/aksonov/react-native-router-flux/blob/master/examples/react-native/App.js
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>) };
此时运行就可以看到下面的效果:
转载:https://www.cnblogs.com/crazycode2/p/9395984.html