React-native 之 react-navigation

react-navigation导航栏组件

具体参数

使用方法

1：导入组件
npm install react-navigation --save

2：创建两个界面A，B，实现从A界面push到B界面

1：创建第一个界面A

import React from 'react';
import {
    View,
    Text,
} from 'react-native';
export default class A extends React.Component {
    //这里定义界面的title
    static navigationOptions = {
        title: '首页A'//对页面的配置
    };

    render () {
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#aaaaff'}}>
                <Text onPress={()=>this.push_b()}>
                    点击
                </Text>
            </View>
        )
    }

    //跳转到B界面
    push_b() {
        const { navigate } = this.props.navigation;
        navigate('B', { title: '页面B', des: '说明' })
    }
}

2：创建第一个界面B

import React from 'react';
import {
    View,
    Text,
} from 'react-native';

export default class B extends React.Component {
    //接收上一个页面传过来的title显示出来
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title
    });
    render() {
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#faaaff'}}>
                <Text onPress={()=>this.pop_a()}>
                    返回{this.props.navigation.state.params.des}
                </Text>
            </View>
        )
    }

    pop_a() {
        this.props.navigation.goBack();
    }
}

3：创建一个导航栏

import React from 'react';

import AView from './AView';
import BView from './BView';

//引用导航栏组件
import {StackNavigator} from 'react-navigation';

//定义导航栏
export const SimpleApp = StackNavigator({
    A: { screen: AView },
    B: { screen: BView },
});
export default class Nav extends React.Component {
    render() {
        return <SimpleApp/>;
    }
}

4：index.js 修改引用文件

import App from './Test/Nav';

AppRegistry.registerComponent('ShoppingMall', () => App);