美文网首页
react navigation - stackNavigato

react navigation - stackNavigato

作者: 静夜秋雨 | 来源:发表于2018-01-25 10:48 被阅读0次

    说明

    本文是根据 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 (
                <View style={[styles.disFlex]}>
                    <Text style={{ fontSize: 20 }}>
                        HomePage {params.user}
                    </Text>
                    <Button
                        onPress={() => {
                            navigate('Users', { user: params.user })
                        }}
                        title={`User with ${params.user}`}
                    />
                    <Button
                        onPress={() => {
                            let newUser = user === 'Sawyer' ? 'Lucy' : 'Sawyer'
                            setParams({ user: newUser })
                        }}
                        title="change header title"
                    />
                </View>
            )
        }
    }
    
    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 (
                <View style={styles.disFlex}>
                    <Text style={{ fontSize: 20 }}>
                        UserName: {params.user}
                    </Text>
                </View>
            )
        }
    }
    
    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: (
                //     <View
                //         style={{
                //             height: 90,
                //             backgroundColor: '#fff',
                //             // flex: 1,
                //             justifyContent: 'center',
                //             alignItems: 'center'
                //         }}
                //     >
                //         <Text style={{ fontSize: 18 }}>首页</Text>
                //     </View>
                // ),
                /**
                 * 头部导航标题可以是字符串也可以是一个 react 组件 如果
                 * 是组件使用方法如上所示不做阐述
                 * 允许字体缩放
                 */
                // headerTitle: (
                //     <View style={{ flex: 1, width: 200, height: 40,justifyContent: 'center',
                //     alignItems: 'center' }} allowFontScaling={true}
                //     numLines={1}>
                //         <Text
                //             style={{
                //                 overflow: 'hidden',
                //                 fontSize: 20,
                //                 width: 200
                //             }}
                //             allowFontScaling={true}
                //             numberOfLines={1}
                //         >
                //             哈哈dfasfas sd fads asd fasf asdf sadf asf af f sa asf
                //             asdf asf asf asf asf你好啊阿卡丽的风景阿卡丽就
                //         </Text>
                //     </View>
                // )
                // 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: <Text>fdsa</Text>,
                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

    相关文章

      网友评论

          本文标题:react navigation - stackNavigato

          本文链接:https://www.haomeiwen.com/subject/jdomaxtx.html