ReactNative学习——导航器使用(navigation)

navigation是官方推荐的一种用于界面跳转实现方式,

准备工作:添加Navigation库到项目里面

打开项目的工作空间,shifr+鼠标右键,在此处打开命令行,执行如下语句,安装navigation库

yarn add react-navigation

1、用navigation实现一个简单内容展示

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


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'DemoApp',
    };

    render() {
        return  (<Text>这是内容部分</Text>) ;
    }
}

const DemoApp = StackNavigator({
    Home: {screen: HomeScreen},
});

export default DemoApp

2、实现页面跳转

需要在DemoApp变量中,使用Chat,新申明一个可跳转页面,值得注意的是,在执行跳转事件的类中,必须申明一个this.props.navigation变量,否则会报错

....省略其他代码...
class HomeScreen extends React.Component {
static navigationOptions = {
    title: 'DemoApp',
};

    render() {
            //这行代码一定要写,否者会报错
            const { navigate } = this.props.navigation;
            return (
                <View >
                    <Text style={{height:100}}>这是内容部分</Text>
                    <Button title="打开登陆界面" onPress={()=>navigate('Chat')}/>
                </View>
            );
        }
}

const DemoApp = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: { screen: LoginActivity },
});
....省略其他代码...

3、打开一个新界面并且传值过去

原页面代码部分
 ...

 //触发打开新界面的button,通过{key:'value'},name是由我们自己定义的key
 <Button title="打开登陆界面" onPress={()=>navigate('Chat',{name:'登陆界面'})}/>

...
待打开的界面代码部分,也可以在控件中使用上一个页面传过来的值,比如Text、Button控件

如果上一个界面传过来的值为空并不会出现异常,而是会显示undefined
...

//被打开的新界面
static navigationOptions = ({navigation})=>({
    //通过key取值
   title: `${navigation.state.params.name}`,
});

...

推荐阅读更多精彩内容