react-native系列(14)导航篇：页面导航StackNavigator参数及使用详解

最新推荐文章于 2024-05-23 09:59:39 发布

黄泽平

最新推荐文章于 2024-05-23 09:59:39 发布

阅读量3k

点赞数 3

分类专栏：前端集合 react-native 文章标签： react-navigation StackNavigator

本文链接：https://blog.csdn.net/zeping891103/article/details/88357821

版权

前端集合同时被 2 个专栏收录

153 篇文章 10 订阅

订阅专栏

react-native

25 篇文章 8 订阅

订阅专栏

react-navigation导航是RN官网推荐使用的导航插件，目前最新版本为3.x，它包括3种类型的导航：

StackNavigator
TabNavigator
DrawerNavigator

本篇主要介绍的是StackNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下

官网地址：https://reactnavigation.org/zh-Hans/

StackNavigator嵌套

一般app的导航都只有一个导航堆栈，结构如下：

有些逻辑比较复杂的app，存在导航嵌套的情况，结构如下：

这种情况下，可以使用StackNavigator嵌套，把子导航堆栈做为根导航堆栈的其中一个页面：

// 子导航堆栈
const itemStack= createStackNavigator(
    {
      Screen1: { screen: Screen1}
    },
    ...
);

// 根导航堆栈
const rootStack = createStackNavigator(
    {
      Screen1: { screen: itemStack}
    },
    ...
);

createStackNavigator函数详解

createStackNavigator函数用于创建Stack导航，它包含了两个参数对象：第一个参数用来配置路由页面，第二个参数用来配置路由的其它信息。

创建时，相关参数详解如下：

const rootStack = createStackNavigator(
    // 路由页面
    {
      Page1: { screen: PageView1 },
      Page2: { screen: PageView2, params: {}} // 第二个参数params为页面入参 
    },
    // 路由其它信息
    {
      initialRouteName: 'Page1', // 初始页，必须是路由配置页面中的某一个
      initialRouteParams: {}, // 初始页入参
      // mode: '', // 系统的页面切换动画风格，目前只有默认card和模态风格modal两种。但本人3.X版本测试结果是仅剩modal一种，一般这个配置不做设置
      // headerMode: 'none' // none时表示隐藏头部的导航栏，默认情况下不做设置
      // 导航栏配置
      defaultNavigationOptions: {
        headerStyle:{}, // 导航栏样式
        headerTitle:'', // 或使用title，导航栏标题
        headerTitleStyle:{}, // 导航栏标题样式
        headerLeft:(<View />), // 导航栏左边如返回等的显示容器
        headerRight:(<View />), // 导航栏右边如工具等的显示容器
        gesturesEnabled: false, // 是否支持滑动返回手势，iOS默认支持，安卓默认关闭
      },
      // 自定义页面切换动画配置
      transitionConfig: () => ({
        // some code
      })
    }
);

测试代码：

import React, { Component } from 'react';
import { View, Easing, Animated } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { AuthScreen, ListScreen, ItemScreen, ModalScreen } from './StackScreen';

const mainNavigator = createStackNavigator(
    {
      Auth: { screen: AuthScreen },
      List: { screen: ListScreen, params: {defaultParam: 'this is defaultParam'}},
      Item: { screen: ItemScreen }
    },
    {
      initialRouteName: 'Auth',
      initialRouteParams: { param: 'this is initParam' },
      defaultNavigationOptions: {
        gesturesEnabled: false
      },
      // 类似于微信的左右切换路由页
      transitionConfig: () => ({
        transitionSpec: {
            duration: 300,
            easing: Easing.out(Easing.poly(4)),
            timing: Animated.timing,
        },
        screenInterpolator: sceneProps => {
            const {layout, position, scene} = sceneProps;
            const {index} = scene;
            const Width = layout.initWidth;
            //沿X轴平移
            const translateX = position.interpolate({
                inputRange: [index - 1, index, index + 1],
                outputRange: [Width, 0, -(Width)], // Width,0指新页面进入坐标变化; 0,-(Width)是指旧页面推出坐标变化
            });
            //透明度
            const opacity = position.interpolate({
                inputRange: [index - 1, index - 0.99, index],
                outputRange: [0, 1, 1],
            });
            return {opacity, transform: [{translateX}]};
        }
      })
    }
);

// 根导航堆栈
const rootStack = createStackNavigator(
    {
      Main: { screen: mainNavigator }, 
      Modal: { screen: ModalScreen } // modal屏操作，常会使用不同的屏间切换样式，且隐藏头部导航栏
    },
    {
      initialRouteName: 'Main',
      initialRouteParams: { defaultParam: 'defaultParam' },
      mode: 'modal', // 定义跳转风格为modal
      headerMode: 'none' // 隐藏该导航堆栈中的标题栏
    }
);

const AppNavigatorContainer  = createAppContainer(rootStack);

class StackNavigator extends Component {
    render(){
        return(
            <View style={{flex:1}}>
                <AppNavigatorContainer />
            </View>
        );
    }
}

export default StackNavigator;

这段代码用到了导航嵌套，目的是把模态框弹窗Modal也作为导航的一部分。有些人会说也可以使用Modal组件，为什么写在这里做为导航的一个页面？因为如果不把Modal做为一个页面，那么模态框仅会弹出在导航栏下的页面容器中而不会遮挡导航栏。

导航过程效果：

NavigationOptions

navigationOptions为静态函数，写在路由页中，主要用于设置导航栏样式，配置参数：

static navigationOptions = ({ navigation }) => ({
    header: null, // 为null时表示隐藏导航栏
    headerStyle:{}, // 导航栏样式
    headerTitle:'', // 或使用title，导航栏标题
    headerTitleStyle:{}, // 导航栏标题样式
    headerLeft:(<View />), // 导航栏左边如'返回'的显示容器
    headerRight:(<View />), // 导航栏右边如'其它辅助功能'的显示容器
    gesturesEnabled: false, // 是否支持滑动返回手势，iOS默认支持，安卓默认关闭
})

测试代码：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

class ListScreen extends Component {
    static navigationOptions = ({ navigation }) => ({
        headerTitle: 'ListScreen',
        headerStyle: {
            backgroundColor: '#f4511e'
        },
        headerTitleStyle: {
            flex: 1,
            textAlign: 'center',
            color: '#FFFFFF',
            fontSize: 26
        },
        headerLeft:(
            <TouchableOpacity 
                style={styles.buttonContainer}
                onPress={()=>{navigation.goBack();}}
            >
                <Text style={styles.headerLeftTextStyle}>返回{navigation.getParam('prevScreenTitle','为空时显示这段文字')}</Text>
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity
                style={styles.buttonContainer} 
                onPress={()=>{navigation.navigate('Item', { prevScreenTitle: 'ListScreen' });}}
            >
                <Text style={styles.headerRightTextStyle}>进入ItemScreen</Text>
            </TouchableOpacity>
        )
    })

    render(){
        const { navigation } = this.props;
        console.log(navigation.getParam('defaultParam'));
        return(
            <View style={styles.viewStyle}>
                <Text>This is ListScreen！</Text>
            </View>
        );
    }
}

ListScreen.propTypes = {
    navigation: PropTypes.object
};

const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonContainer: {
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5
    },
    headerLeftTextStyle: {
        color: 'blue'
    },
    headerRightTextStyle: {
        color: 'green'
    }
});

export default ListScreen;

导航栏样式效果：

页面跳转及参数传递

路由页面跳转使用navigation.navigate函数，第一个参数为跳转的页面名称，第二个参数为传递的参数：

navigation.navigate('List', {param:'some data'});

关于接收参数，无论是在创建时设置的默认入参还是跳转页面时传递的参数，都通过getParam函数来获取，第一个参数为参数名称，第二个参数为当没有参数时，以该参数内容作为入参：

const initData = navigation.getParam('param','当没有获取到参数时显示这段文字')

返回上一个页面使用goBack函数：

navigation.goBack()

导航栏与页面内容的数据交互

页面内容通过navigation.setParams来设置导航栏所需数据：

state = {
    day: '星期一'
}

componentDidMount() {
    this.props.navigation.setParams({ day: this.state.day});
}

导航栏通过navigation.getParam来获取数据：

const day = navigation.getParam('day'); // 星期一

测试代码：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

class ItemScreen extends Component {

    static navigationOptions = ({ navigation }) => ({
        headerTitle: 'ItemScreen',
        headerStyle: {
            backgroundColor: '#f4511e'
        },
        headerTitleStyle: {
            flex: 1,
            textAlign: 'center',
            color: '#FFFFFF',
            fontSize: 26
        }, 
        headerLeft:(
            <TouchableOpacity 
                style={styles.buttonContainer}
                onPress={()=>{navigation.goBack();}}
            >
                <Text style={styles.headerLeftTextStyle}>返回{navigation.getParam('prevScreenTitle','为空时显示这段文字')}</Text>
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity 
                style={styles.buttonContainer}
                onPress={navigation.getParam('increaseCount')}
            >
            <Text style={styles.headerRightTextStyle}>计数器 +1</Text> 
        </TouchableOpacity>
        )
    })

    constructor(props){
        super(props);
        this.state = {count:0};
    }

    componentDidMount() {
        this.props.navigation.setParams({ increaseCount: this._increaseCount });
    }

    _increaseCount = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render(){
        const { navigation } = this.props;

        return(
            <View style={styles.viewContainer}>
                <Text>计数器结果：{this.state.count}</Text>
                <TouchableOpacity 
                    style={[styles.buttonContainer, styles.modalStyle]}
                    onPress={()=> navigation.navigate('Modal')}
                >
                    <Text style={styles.modalTextStyle}>进入ModalScreen</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

ItemScreen.propTypes = {
    navigation: PropTypes.object
};

const styles = StyleSheet.create({
    viewContainer:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonContainer: {
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5
    },
    headerLeftTextStyle: {
        color: 'blue'
    },
    headerRightTextStyle: {
        color: 'green'
    },
    modalStyle: {
        marginTop: 10,
        borderWidth: 1,
        padding: 5
    },
    modalTextStyle: {
        color: 'red'
    },
});

export default ItemScreen;

数据交互效果：

页面切换动画

可在transitionConfig属性配置，不了解结构可以看开篇处的createStackNavigator函数详解，详解测试代码中已经定义了一种动画效果。这里再贴出一份上下切换的动画作为比较：

// 上下切换路由页
transitionConfig: () => ({
  transitionSpec: {
      duration: 300,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const height = layout.initHeight;
      //沿Y轴平移
      const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
      });
      //透明度
      const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
      });
      return { opacity, transform: [{ translateY }] };
  },
})

效果：

若要自定义切换动画，可以使用先了解一下Animated库。也可以参考 react-native系列(13)动画篇：Animated动画库和LayoutAnimation布局动画详解

（小贴士）react-navigation默认情况下负责为您处理 Android 返回按钮，即设备屏幕外的返回键，如果没有处理或不符合您的期望，可以使用RN官网中的BackHandler函数监听实现。

以上就是StackNavigator的一些实用经验，希望能对你有一定参考价值。

黄泽平

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
react-native系列(14)导航篇：页面导航StackNavigator参数及使用详解

react-navigation导航是RN官网推荐使用的导航插件，目前最新版本为3.x，它包括3种类型的导航：StackNavigator TabNavigator DrawerNavigator本篇主要介绍的是StackNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下官网地址：https://reactnavigation.org/zh-Hans/...
复制链接

扫一扫