[英]How do I change this React Navigation v5 code to v6?
I'm studying react native and discovered that tabBarOptions
was already deprecated.我正在研究本机反应,发现
tabBarOptions
已被弃用。 I know that including it in screenOptions
is the new way but how do I do this with this code?我知道将它包含在
screenOptions
中是新方法,但是如何使用此代码执行此操作? I am trying to combine them by enclosing them to a bracket but it does not work.我试图通过将它们括在一个括号中来组合它们,但它不起作用。
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import ScreenA from './NavScreen/ScreenA';
import ScreenB from './NavScreen/ScreenB';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
const Tab = createBottomTabNavigator();
const RNTabNavMaterialTab = () => {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused, size, color}) => {
let iconName;
if (route.name === 'Screen_A') {
iconName = 'autoprefixer';
size = focused ? 25 : 20;
// color = focused ? '#f0f' : '#555';
} else if (route.name === 'Screen_B') {
iconName = 'btc';
size = focused ? 25 : 20;
// color = focused ? '#f0f' : '#555';
}
return <FontAwesome5 name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#f0f',
inactiveTintColor: '#555',
activeBackgroundColor: '#fff',
inactiveBackgroundColor: '#999',
showLabel: true,
labelStyle: {fontSize: 14},
showIcon: true,
}}
activeColor="#f0edf6"
inactiveColor="#3e2465"
barStyle={{backgroundColor: '#694fad'}}>
<Tab.Screen
name="Screen_A"
component={ScreenA}
options={{headerShown: false}}
/>
<Tab.Screen
name="Screen_B"
component={ScreenB}
options={{headerShown: false}}
/>
</Tab.Navigator>
</NavigationContainer>
);
};
export default RNTabNavMaterialTab;
I wanted to share what I have learned and discovered that the solution is very simple.我想分享我学到的东西,发现解决方案非常简单。 What I did was set the
screenOptions
set in v6 and put all of those above the tabBarIcon
.我所做的是在 v6 中设置
screenOptions
并将所有这些设置在tabBarIcon
。
const RNTabNavMaterialTab = () => {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({route}) => ({
tabBarActiveTintColor: "#f0f",
tabBarInactiveTintColor: "#555",
tabBarActiveBackgroundColor: "#fff",
tabBarInactiveBackgroundColor: "#999",
tabBarShowLabel: true,
tabBarLabelStyle: {"fontSize": 14},
tabBarStyle: [{"display": "flex"},null],
tabBarIcon: ({focused, size, color}) => {
let iconName;
if (route.name === 'Screen_A') {
iconName = 'autoprefixer';
size = focused ? 25 : 20;
// color = focused ? '#f0f' : '#555';
} else if (route.name === 'Screen_B') {
iconName = 'btc';
size = focused ? 25 : 20;
// color = focused ? '#f0f' : '#555';
}
return <FontAwesome5 name={iconName} size={size} color={color} />;
},
})}>
<Tab.Screen
name="Screen_A"
component={ScreenA}
options={{headerShown: false}}
/>
<Tab.Screen
name="Screen_B"
component={ScreenB}
options={{headerShown: false}}
/>
</Tab.Navigator>
</NavigationContainer>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.