react navigation - stackNavigator详细配置（中文版）

说明

本文是根据 navigation action 的官方最新文档一步一步写出来的配置，没个配置都有加详细的说明，如果说明不够理解请将页面滚动到最底部 加 qq 群一起讨论
下面代码注释可以取消看效果

如果你觉得该文章对你有帮助加个喜欢，github 加个 start 谢谢

import React, { Component } from 'react'
import { Platform, StyleSheet, View, Text, Button, Image } from 'react-native'
import { StackNavigator } from 'react-navigation'

class MyHomeScreen extends Component {
    static navigationOptions = ({ navigation }) => {
        const { state: { params } } = navigation
        return {
            title: `Home ${params.user}`
        }
    }
    render() {
        const {
            state: { params, routerName, key },
            navigate,
            setParams
        } = this.props.navigation
        const { user } = params
        return (
            
                
                    HomePage {params.user}
                
                 {
                        navigate('Users', { user: params.user })
                    }}
                    title={`User with ${params.user}`}
                />
                 {
                        let newUser = user === 'Sawyer' ? 'Lucy' : 'Sawyer'
                        setParams({ user: newUser })
                    }}
                    title="change header title"
                />
            
        )
    }
}

class MyUserScreen extends Component {
    // 以静态方法的形式配置 navigationOptions
    static navigationOptions = ({ navigation }) => {
        const { state: { params } } = navigation
        return {
            title: `User is ${params.user}`
        }
    }
    render() {
        const { state: { params } } = this.props.navigation
        return (
            
                
                    UserName: {params.user}
                
            
        )
    }
}

const styles = StyleSheet.create({
    disFlex: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

export default StackNavigator(
    {
        Home: {
            screen: MyHomeScreen,
            navigationOptions: {}
        },
        Users: {
            screen: MyUserScreen,
            navigationOptions: {}
        }
    },
    {
        /**
         * header 头部标题切换过渡效果
         * 
         * float：切换页面时保持顶部固定显示 从右至左 平滑显示 这是 ios 上常见的模式
         * screen：切换时整屏淡入淡出，每个屏幕上都有自身的标题  这是 android 常见的模式
         * none： 头部标题隐藏
         */
        headerMode: 'float',
        /* 
         * 屏幕切换时的过渡效果
         * 
         * card： 使用 ios 或 android 默认切换动画。
         * modal： 从底部向上划入，此为 ios 常见效果，对 android 无效
         * 
         * @type {String}
         * @default 'card'
         */
        mode: 'card',
        /**
         * 使用这个属性可以覆盖或者扩展堆栈中单个屏幕的默认样式
         * 配置来自reactnative所支持的样式
         */
        cardStyle: {
            backgroundColor: '#ffffff',
            borderColor: '#ff0000',
            borderWidth: 0
        },
        transitionConfig() {},
        /**
         * 当屏幕切换动画开始的时候执行
         */
        onTransitionStart() {
            console.log('动画开始了，干点啥吧~')
        },
        /**
         * 当屏幕切换动画结束的时候执行
         */
        onTransitionEnd() {
            console.log('动画结束了，干点啥吧~')
        },
        navigationOptions: {
            /**
             * 用作于 headerTitle 的备用标题字符串。
             * 当前套在 TabNavigator 中 将用作于 tabBarLabel 的备用标题字符串
             * 或
             * 当前套在 DrawerNavigator 中 将用作于 drawerLabel 的备用标题字符串
             */
            title: 'home',
            /**
             * 自定义 header 接受一个组件，也可是是自定义组件，你也可
             * 以传入 props 进去进行动态显示你想展示的内容
             * 
             * 本案例作影藏处理，如果你想看效果请把注释取消
             */
            // header: (
            //     
            //         首页
            //     
            // ),
            /**
             * 头部导航标题可以是字符串也可以是一个 react 组件 如果
             * 是组件使用方法如上所示不做阐述
             * 允许字体缩放
             */
            // headerTitle: (
            //     
            //         
            //             哈哈dfasfas sd fads asd fasf asdf sadf asf af f sa asf
            //             asdf asf asf asf asf你好啊阿卡丽的风景阿卡丽就
            //         
            //     
            // )
            // headerTitle: '你好你好你好啊啊啊啊  离开点击分类阿斯利康减肥哎算了大姐夫',
            /**
             * 不知道咋玩的，测试没啥效果
             */
            headerTitleAllowFontScaling: true,
            /**
             * 是否允许滑动手势来取消当前屏幕  ios 默认为 true 在 android 上默认为false
             */
            gesturesEnabled: true,
            /**
             * 手势响应距离
             */
            gestureResponseDistance: {
                //横向手势距离
                horizontal: 25
                //竖向手势距离
                // vertical: 135
            },
            /**
             * 手势方向 默认 left-to-right
             * inverted 反向
             */
            // gestureDirection: 'inverted',
            /**
             * 返回显示的文字，默认为上一级页面的名称，null为不显示
             */
            // headerBackTitle: null,
            /**
             * 如果返回显示的文字过长，则用该属性的字符串替代
             */
            headerTruncatedBackTitle: '返回',
            /**
             * header 右侧显示的元素，react 元素
             */
            headerRight: fdsa,
            headerBackTitleStyle: {
                color: '#000000'
            },
            /**
             * header 样式
             */
            headerStyle: {},
            /**
             * header 标题样式
             */
            headerTitleStyle: {
                color: '#000000'
            },
            /**
             * header 色调
             */
            headerTintColor: '#ff0000'
        },
        /**
         * 过渡配置
         * 更多玩法待研究
         */
        transitionConfig: () => ({
            // transitionSpec: {
            //     duration: 100,
            //     // easing: Easing.out(Easing.poly(4)),
            //     // timing: Animated.timing
            // },
            // screenInterpolator: sceneProps => {
            //     const { layout, position, scene } = sceneProps
            //     const { index } = scene
            //     const height = layout.initHeight
            //     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 }] }
            // }
        }),
        initialRouteParams: {
            // 设置初始参数
            user: 'Sawyer'
        }
    }
)

如果你对文章感兴趣 或者有其他技术问题探讨

qq群：218618405
github 地址：https://github.com/Sawyer-china/
本实例 地址： https://github.com/Sawyer-china/react-navigation-demo