react-navigation 简单使用

来源：互联网发布：mac粉底液色号选择编辑：程序博客网时间：2024/05/29 13:01

react-navigation 做 TarBar 布局和导航非常简单方便,最好用的导航了http://www.jianshu.com/p/2ce08b92cf60
https://reactnavigation.org/docs/intro/
常用布局一般是首页 4 个 TabBar 布局，直接用 TabNavigator 就行

import {StackNavigator, TabNavigator} from "react-navigation";const MainScreenNavigator = TabNavigator({    Home: {        screen: Home,        navigationOptions: {            tabBar: {                label: '互助',                icon: ({tintColor}) => (                    <Image                        source={require('../images/home.png')}                        style={[{tintColor: tintColor},styles.icon]}                    />                ),            },        }    },    Certificate: {        screen: Certificate,        navigationOptions: {            tabBar: {                label: '凭证',                icon: ({tintColor}) => (                    <Image                        source={require('../images/cert.png')}                        style={[{tintColor: tintColor},styles.icon]}                    />                ),            },        }    },}, {    animationEnabled: false, // 切换页面时不显示动画    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的    swipeEnabled: false, // 禁止左右滑动    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转    tabBarOptions: {        activeTintColor: '#0F9C00', // 文字和图片选中颜色        inactiveTintColor: '#999', // 文字和图片默认颜色        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？        style: {            backgroundColor: '#fff', // TabBar 背景色        },        labelStyle: {            fontSize: 12, // 文字大小        },    },});const styles = StyleSheet.create({    icon: {        height: 22,        width: 22,        resizeMode: 'contain'    }});

然后顶层再用一个 StackNavigator ,把首页和其它页面嵌进去就行了。
StackNavigator 和 TabNavigator 是可以相互嵌套的，这样就能从首页 Tab 跳转到其它页面了

const App = StackNavigator({    Main: {        screen: MainScreenNavigator,        navigationOptions: {            header: {                title: '互助',                style: {                    backgroundColor: '#fff'                },                backTitle: null            }        }    },    PlanDetail: {        screen: PlanDetail,        navigationOptions: {            header: {                style: {                    backgroundColor: '#fff'                },            }        }    }});AppRegistry.registerComponent('QQHZ_RN', () => App);

页面跳转、返回、传参

const {navigate} = this.props.navigation;<TouchableHighlight onPress={()=>{     navigate('PlanDetail',{name:'leslie',id:100});}}>// 返回上一页this.props.navigation.goBack();

navigate 函数根据名字跳转，还可以有第二个参数用于页面之间传递参数

接收参数

export default class PlanDetail extends Component {    static navigationOptions = {        // title 可以这样设置成一个函数， state 会自动传过来        title: ({state}) => `${state.params.name}`,    };    componentDidMount() {        const {params} = this.props.navigation.state;        const id = params.id;    }

通过 this.props.navigation.state.params 接收参数

0 0