3

我已将我的依赖项更新为 React Navigation 6.x

React Navigation 6.x 说，“默认情况下，底部选项卡和抽屉中的标题# 开发人员通常希望在抽屉和底部选项卡内显示屏幕标题。为此，我们必须嵌套一个提供标题的堆栈导航器，甚至“

现在我在旧的自定义构建的堆栈导航器标题上方有一个新标题。说清楚 - 我有两个标题。

我想删除我旧的自定义构建的堆栈导航器标头并将新的本机标头与 React Navigation 6.x 合并。

我的问题示例

我想要反应导航 v6 中底部选项卡的默认标题中的自定义标题 ui 和功能。下面是我现有的标头组件。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { Feather } from '@expo/vector-icons';
import HomeScreen from '../screens/HomeScreen';
import SearchIcon from './searchicon';

const HomeStack = createStackNavigator();

const homeRoutes = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
      name="Homes" 
      component={HomeScreen}
      options={{
        headerTitle: () => (
          <Text style={styles.myText}>MyApp</Text>
        ),
        headerTitleAlign: 'left',
        //headerStyle:{height: 67},
        headerRight: () => (
          <View style={styles.Container}>
          <SearchIcon/>
          <Feather name="bell" size={21} color="black" />
          </View>
        )
      }}
      />
    </HomeStack.Navigator>
  );
}

const styles = StyleSheet.create({
  Container: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: 'center',
    alignContent: 'center',
    width: 120,
  },
  myText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#ff0000',
  }
});

export default homeRoutes;

底部标签代码如下：

import React from 'react';
//import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// import { getHeaderTitle } from '@react-navigation/elements';
import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
import AddScreen from '../screens/AddScreen';
import ExploreScreen from '../screens/ExploreScreen';
import HomeStackScreen from './homeroutes';
import MeStackScreen from './meroutes';
import LikesStackScreen from './likesroutes';

const Tab = createBottomTabNavigator();

const BottomNavRoutes = () => {
    return (
    <Tab.Navigator
      initialRouteName="HomeStackScreen"
        screenOptions={({ route }) => ({
          headerShown: false, //Show Header in Stack Navigator
          tabBarIcon: ({ color, size }) => {
            if (route.name === 'Home') {
              return <MaterialCommunityIcons name="home" color={color} size={size} />;
            }
            if (route.name === 'Explore') {
              return <MaterialIcons name="explore" color={color} size={size} />;
            }
            if (route.name === 'Add') {
              return <MaterialCommunityIcons name="plus-box" color={color} size={size} />;
            }
            if (route.name === 'Likes') {
              return <MaterialCommunityIcons name="heart" color={color} size={size} />;
            }
            if (route.name === 'Me') {
              return <MaterialCommunityIcons name="account" color={color} size={size} />;
            }
          },
            tabBarActiveTintColor: "#ff0000",
            tabBarInactiveTintColor: "#888888",
            tabBarLabelStyle: {
              fontSize: 11
            },
            tabBarStyle: [
              {
                display: "flex"
              },
          //showLabel: false,
          //style: { padding:5, paddingBottom: 4, },  
          // null
            ]
          }
        )} 
    >
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Explore" component={ExploreScreen} />
      <Tab.Screen name="Add" component={AddScreen} 
        // options={{
        //   tabBarLabel: 'Home',
        //   tabBarIcon: ({ color }) => (
        //     <MaterialCommunityIcons name="home" color={color} size={26} />
        //   ),
        // }}
      />
      <Tab.Screen name="Likes" component={LikesStackScreen} />
      <Tab.Screen name="Me" component={MeStackScreen} />
    </Tab.Navigator>
    )
}

export default BottomNavRoutes;

如何去做。有任何想法吗？请帮忙。

4

1 回答 1

0

我也有同样的问题，所以我：v

  LogBox.ignoreLogs(['Bottom Tab Navigator']);
于 2021-09-09T17:16:52.760 回答