React Native开发之React Navigation的StackNavigator 详解

RN的开发中，很多时候需要导航或者跳转，那么就来看看具体怎么使用，在rn之前的版本中有一个navigator可以使用的，但是现在的版本已经更新，所有与导航相关的都放在了React Navigation中

第一步：安装React Navigation

打开命令行使用npm安装即可

npm install --save react-navigation

第二步：建立跳转前的页面StackNav.js,并导出StackNavigator ，代码如下：

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

import HomeScreen from './app/pages/HomeScreen';

class StackNav extends Component{

    render(){
        return (
            <View>
                <Button 
                    onPress={()=>this.props.navigation.navigate('HomeScreen',{user:'tujiawang'})}
                    title="点击跳转到主页"
                    color="#841584"
                    accessibilityLabel="点击跳转到主页"
                />
            </View>
        );
    }
}

export default StackNavigator({
        StackNav:{
            screen:StackNav
        },
        HomeScreen:{
            // path:'username/:name',
            screen:HomeScreen,
            navigationOptions : (({navigation}) => ({
                title: `Chat with ${navigation.state.params.user}`
            }))
            // navigationOptions: ({navigation}) => ({
                // title: 'hometitle', // 面包屑标题
                // header  导航栏设置对象
                // headerTitle  导航栏标题，可以使字符串也可以是组件
                // headerTitleAllowFontScaling 
                // headerBackTitle   左上角的返回键文字, 默认是上一个页面的title，设置这个属性会覆盖掉title的值
                // headerTruncatedBackTitle 设置当上个页面标题不符合返回箭头后的文字时，默认改成”返回”
                // headerRight  导航栏右按钮
                // headerLeft  导航栏左按钮
                // headerStyle  导航栏的样式
                // headerTitleStyle  导航栏的title的style
                // headerBackTitleStyle  设置导航条返回文字样式
                // headerTintColor  返回按钮的颜色
                // headerPressColorAndroid 安卓独有的设置颜色纹理，需要安卓版本大于5.0
                // gesturesEnabled 是否允许右滑返回，在iOS上默认为true，在Android上默认为false
                // gestureResponseDistance 对象覆盖触摸从屏幕边缘开始的距离，以识别手势     horizontal - number - 水平方向的距离 默认为25。vertical - number - 垂直方向的距离 默认为135。
            // })
        }
    }
    // ,{
        // initialRouteName:StackNav, // 设置默认的页面
        // initialRouteParams      // 初始化路由的参数
        // paths                   // RouteConfigs里面路径设置的映射
        // headerMode: 'none',        // 边缘滑动返回上级页面时动画效果 float 可以看到一个明显的过渡动画 screen 滑动过程中，整个页面都会返回 none 不显示
        // mode: 'card',              // 跳转风格 card(默认的)ios和android默认风格 modal iOS独有的使屏幕从底部滑出
        // cardStyle               // 自定义设置跳转效果
        // transitionConfig        // 自定义设置滑动返回的配置
        // onTransitionStart       // 页面切换开始时的回调函数
        // onTransitionEnd         // 页面切换结束时的回调函数
        // navigationOptions: {
        //   gesturesEnabled: false,   // 是否允许右滑返回 ios默认为true，android默认为false
        // }
// }
);

第三步：建立跳转后的页面HomeScreen.js,代码如下：

import React,{Component} from 'react';
import {
	StyleSheet,
    View,
    Text,
    Button,
	Image,
	StatusBar
} from 'react-native';

export default class HomeScreen extends Component{
	render(){
		return (
			<View style={{flex:1}}>
				
				<Text>我是首页面哦{this.props.navigation.state.params.user}</Text>
			</View>
			
		);
	}
}

在这个例子中我们从第一个页面点击按钮跳转到第二个页面，还携带了一个参数user，最终的效果如下：

React Native开发之React Navigation的StackNavigator 详解

猜你喜欢