第三章、ReactNative页面跳转

原創

2020-02-21 14:56

参考: ReactNative-中文网:ReactNative StackNavigation页面跳转

GitHub官网:https://reactnavigation.org/docs/navigators/stack

ReactNative中文网社区今后主推的方案是一个单独的导航库react-navigation，它的使用十分简单。

第一步: 安装组件

yarn add react-navigation 

or
 

npm install --save react-navigation

第二步: 然后你就可以快速创建一个有两个页面（Main和Profile）的应用了：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
} from 'react-native';

import {StackNavigator,} from 'react-navigation';
import Welcome from './transfer/Welcome';
import Profile from './transfer/Profile';

export default class RNStudy extends Component {


    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    render() {
        return (
            <ModalStack/>
        );
    }
}
const ModalStack = StackNavigator(
    {
        Welcome: { screen: Welcome },//这样是默认打开首页
        Profile: { screen: Profile },
    },
    {
        navigationOptions: {
            headerBackTitle: "首页",
            headerTintColor: '#000000',
            header:null,
            showIcon: true,
            swipeEnabled: true,
            animationEnabled: true,
        },
        mode: 'card',
    },
);

AppRegistry.registerComponent('RNStudy', () => RNStudy);

第三步、Profile界面

        this.props.navigation.goBack(null) //拿到navigation对象可以进行回退，跳转;
        DeviceEventEmitter.emit("request");
        //this.props.navigation.navigate('TabPage', {name: ' Profile Page'});

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