美文网首页
重写react-navigation的stackNaviagto

重写react-navigation的stackNaviagto

作者: 莫伊剑客 | 来源:发表于2021-04-29 16:30 被阅读0次
    import React from 'react'
    import {Platform} from "react-native";
    import 'react-native-gesture-handler';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from "@react-navigation/stack";
    
    const {Navigator, Screen} = createStackNavigator();
    import Home from '../screens/Home';
    import Detail from '../screens/Detail';
    
    const routers = () => {
        // 去掉导航header 投影
        const headerStyle = (() => {
            if (Platform.OS === 'ios') {
                return {
                    borderBottomWidth: 0,
                    borderBottomColor: "red",
                    shadowOffset: {
                        width: 0, //阴影X轴位移
                        height: 5 //阴影Y轴位移
                    },
                    shadowColor: 'green',//阴影颜色
                    shadowRadius: 0, //阴影模糊半径
                    shadowOpacity: 0.2, // 阴影不透明度
                }
            } else {
                return {
                    borderBottomWidth: 0,
                    elevation: 0
                }
            }
        })()
        return (
            <NavigationContainer>
                <Navigator initialRouteName={'Home'}>
                    <Screen name={'Home'} component={Home} options={{title: 'Home', headerStyle}}/>
                    <Screen name={'Detail'} component={Detail} options={{title: 'Detail', headerStyle}}/>
                </Navigator>
            </NavigationContainer>
        )
    }
    export default routers
    
    

    亲测有效!

    相关文章

      网友评论

          本文标题:重写react-navigation的stackNaviagto

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