ReactNative项目实战03(界面跳转与传值).md

引言:上篇文章我们实现了rn的一个界面,现在我们来创建多个界面,并实现界面之间的跳转

先看最终实现效果

创建多个界面,并使用Navigator第三方框架实现跳转

1.我们先创建一个MainPage.js界面

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

export default class MainPage extends Component {

    render() {
        return (
            <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{color:'#000'}}>Main Page</Text>
            </View>
        );
    }
}

2.现在我们要做的就是从登陆界面点击登陆按钮后,跳转到该界面

而要实现界面跳转功能:RN推荐使用导航库react-navigation (https://github.com/react-navigation/react-navigation)
我们进入其官网学习使用(https://reactnavigation.org/docs/en/getting-started.html)

2.1.第一步:先添加依赖库文件

yarn add react-navigation

依赖库下载成功后,可在项目根目录的package.json文件中查看到依赖配置

"dependencies": {
  "react": "16.3.1",
  "react-native": "0.55.4",
  "react-navigation": "^2.1.0"
},

2.2使用导航库,我们新建.js文件,专门用于存放所有界面的栈

import { createStackNavigator } from 'react-navigation';
import MainPage from './page/main/MainPage'
import LoginPage from './page/login/LoginPage'

const RootStack = createStackNavigator(
    {
        Login:LoginPage,
        Main:MainPage,
    },
    {
        initialRouteName: 'Login',
    }
);

export {RootStack}

2.3然后再登陆界面点击按钮,跳转MainPage界面

    _onPressLogin = ()=> {
        if (this.state.username === 'timmy' && this.state.password === '123') {
            console.log("恭喜登陆成功")
        }
        this.props.navigation.navigate('Main');
    };

到这里的实现效果是:

3.我们发现每个界面的顶部都有一个默认的toolbar,我们对其进行修改
a.在RootStack里修改是全局toolbar的设置
b.也可以在单独界面中进行自定义设置

const RootStack = createStackNavigator(
    {
        Login:LoginPage,
        Main:MainPage,
    },
    {
        initialRouteName: 'Login',
        /* The header config from HomeScreen is now here */
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#f00',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);

首页单独设置

export default class MainPage extends Component {
    static navigationOptions = {
        title: 'Main',
        headerStyle: {
            backgroundColor: '#333', //背景色
        },
        headerTintColor: '#f00', //文字和箭头颜色
        headerTitleStyle: {  //文本样式
            fontWeight: 'bold', 
            fontSize:20,
        },
    };

    render() {
        return (
            <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{color:'#000'}}>Main Page</Text>
            </View>
        );
    }
}

效果:

4.界面跳转并传值,上面的功能只是简单的实现了界面跳转,在实际开发中可不会这么简单,下面我们将登陆界面输入的用户名和密码传入到下一个界面并展示.

    _onPressLogin = ()=> {
        if (this.state.username == null || this.state.username.length <= 0) {
            console.log("请输入用户名");
            return;
        }
        if (this.state.password == null || this.state.password.length <= 0) {
            console.log("请输入密码");
            return;
        }
        if (this.state.username === 'timmy' && this.state.password === '123') {
            console.log("恭喜登陆成功")
        }
        this.props.navigation.navigate('Main', {
                UserName: this.state.username,
                Password: this.state.password,
            }
        );
    };

    render() {
        return (
            <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{color:'#000'}}>Main Page</Text>
                <Text style={{color:'#000'}}>UserName: {this.props.navigation.getParam('UserName')}</Text>
                <Text style={{color:'#000'}}>Password: {this.props.navigation.getParam('Password')}</Text>
            </View>
        );
    }

5.StackNavigator的其他属性

navigationOptions：配置StackNavigator的一些属性。  
    title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用  
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null 
    headerTitle：设置导航栏标题，推荐  
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null 
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回" 
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件  
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件  
    headerStyle：设置导航条的样式。背景色，宽高等  
    headerTitleStyle：设置导航栏文字样式  
    headerBackTitleStyle：设置导航栏‘返回’文字样式  
    headerTintColor：设置导航栏颜色  
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0  
    gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭  

screen：对应界面名称，需要填入import之后的页面  
mode：定义跳转风格  
   card：使用iOS和安卓默认的风格  
   modal：iOS独有的使屏幕从底部画出。类似iOS的present效果  
headerMode：返回上级页面时动画效果  
   float：iOS默认的效果  
   screen：滑动过程中，整个页面都会返回  
   none：无动画  
cardStyle：自定义设置跳转效果  
   transitionConfig： 自定义设置滑动返回的配置  
   onTransitionStart：当转换动画即将开始时被调用的功能  
   onTransitionEnd：当转换动画完成，将被调用的功能  
path：路由中设置的路径的覆盖映射配置  
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件  
initialRouteParams：初始路由参数

6.添加返回上一个界面的功能

this.props.navigation.goBack()

• 总结
  a.第三方库react-navigation的使用,并实现界面跳转
  b.界面跳转并传值
  c.界面头部效果设置

GitHub源码地址:https://github.com/Timmy-zzh/RnPractice