标签：size otto enabled 描述 之间 wrap container null xtend
如何导入 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> ) } }
通过设置 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
react-native 路由 react-native-router-flux
标签：size otto enabled 描述 之间 wrap container null xtend
原文地址：https://www.cnblogs.com/plBlog/p/12346674.html
