第三章、ReactNative页面跳转

来源：互联网发布：2017年电视直播软件编辑：程序博客网时间：2024/06/04 18:03

参考: 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默认支持，安卓默认关闭

阅读全文

0 0