react navigation使用记录（持续更新）

react native 环境
"react": "16.13.1",
"react-native": "0.63.3",
react-navigation 版本以及需要添加的依赖
"@react-navigation/bottom-tabs": "^5.7.0",
"@react-navigation/native": "^5.7.0",
"@react-navigation/stack": "^5.7.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
1、创建tab

import React from 'react'
import {Image, Text, View,DeviceEventEmitter} from "react-native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";

import Home from '../Home/Home';
import Collect from '../Collect/Collect';
import Mine from '../Mine/Mine';
import appColor from '../../constants/appColor';
import Images from '../../constants/Images';

const getTabIcon = (props,image,imageSel)=>{
    // console.log(props)
    const {color,focused,size} = props

    return (
        <Image source={focused ? imageSel : image}
               resizeMode={'contain'}
               style={{width:size,height:size}}
        />
    )

}


const Tab = createBottomTabNavigator()
const MainTab = ()=>{
    return (
        <Tab.Navigator
            initialRouteName={'Home'}
            screenOptions={{
                headerStyle: {
                    backgroundColor: '#fff',
                },
            }}
            lazy={true}
            tabBarOptions={{
                activeTintColor: '#3981F7',
                inactiveTintColor:'#C4C9D6',
                showIcon:true,
                style:{
                    backgroundColor: '#fff',borderTopColor:'#fff'
                },

            }}
        >
            <Tab.Screen
                name={'Home'} component={Home}
                options={{
                    title:'首页',
                    tabBarIcon: (props) => {
                        return  getTabIcon(props,Images.tab_home_t,Images.tab_home_b)
                    },
                }}
            />
            <Tab.Screen
                name={'Collect'} component={Collect}
                options={{
                    title:'收藏',
                    tabBarIcon: (props) => {
                        return  getTabIcon(props,Images.tab_collect_t,Images.tab_collect_b)
                    },
                }}
            />

            <Tab.Screen
                name={'Mine'} component={Mine}
                options={{
                    title:'我的',
                    tabBarIcon: (props) => {
                        return  getTabIcon(props,Images.tab_mine_t,Images.tab_mine_b)
                    },
                }}
            />

        </Tab.Navigator>
    )
}
export default MainTab

2、创建StackNavigator

import 'react-native-gesture-handler'
import React from 'react'
import {View,Text,Image} from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {CardStyleInterpolators, createStackNavigator, TransitionSpecs} from '@react-navigation/stack';

import MainTab from './MainTab';
import Splash from '../Splash';
//默认属性
const screenOptions={
    headerMode:'none',
    headerStyle: {
        backgroundColor: '#fff',
    },
    headerBackTitleVisible:false,
    headerTintColor: '#333',
    headerTitleAlign:'center',
    headerTitleStyle: {
        fontWeight: 'bold',
    },
    // headerBackImage:({tintColor})=>{
    //     console.log('headerBackImage',tintColor)
    //     return (
    //         <View style={{width:30,height:30,justifyContent:'center',alignItems:'center'}}>
    //             <Image source={Images.back}
    //                    resizeMode={'contain'}
    //                    style={{width:16,height:16,tintColor:tintColor}}/>
    //         </View>
    //
    //     )
    // },
    cardStyleInterpolator:CardStyleInterpolators.forHorizontalIOS
}

const Stack = createStackNavigator()

export default ()=> {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName={'Splash'}
                screenOptions={screenOptions}
                mode={'card'}
            >
                <Stack.Screen name={'Splash'} component={Splash} options={{headerShown:false}}/>
                <Stack.Screen name={'Main'} component={MainTab} options={{title:'', headerTransparent:true}}/>
   
            </Stack.Navigator>
        </NavigationContainer>
    )
}

3、页面里面设置样式

navigation.setOptions({

//按钮及文字颜色
headerTintColor: '#fff',    
//右边容器加一个右边距
headerRightContainerStyle: {paddingRight: screen.PIXEL_40},
//右边按钮
            headerRight:()=>(
                <TouchableOpacity
                    style={{paddingRight:screen.PIXEL_20}}
                    onPress={()=>{

                    }}
                >
                    <Image source={Images.share} style={{width:screen.PIXEL_50,height:screen.PIXEL_50}}/>
                </TouchableOpacity>
            ),
//头部设置背景渐变色
headerBackground:()=>(
                <LinearGradientView
                    colors={['#619afb','#427fe7']}
                    style={{flex:1}}
                />
            )
        })