React native React Navigation 5存在问题：底部选项卡导航器未正确渲染显示带阴影的小框

因此，我使用

@react navigation/bottom tabs

在两个屏幕之间创建了一个简单的底部选项卡导航器，我得到了这种奇怪的外观：

我使用了一个非常简单的示例，下面是我的第一个和第二个屏幕的代码：

constscreenone=（）=>{
返回屏幕1；
};
常量收藏夹=（）=>{
返回收藏夹；
};

下面是用于底部导航器的代码：

constrootnavigator=（）=>{
返回(
);
};

这是我在App.js中的组件

const-App=（）=>{
返回(
);
};
导出默认应用程序；

为什么会发生这种情况？是否可以使用

screenpoptions

prop或每个屏幕中的

options

prop来修复这种情况？

是上面底部选项卡的实现

您的

RootNavigation.js

应该如下所示-

import * as React from 'react';
import { View } from 'react-native';
import { useTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ScreenOne from '../screens/ScreenOne';
import Favourites from '../screens/Favourites';

const Tab = createBottomTabNavigator();

function RootNavigation() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <Tab.Navigator>
        <Tab.Screen name="ScreenOne" component={ScreenOne} />
        <Tab.Screen name="Favourites" component={Favourites} />
      </Tab.Navigator>
    </View>
  );
}

export default RootNavigation;

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import RootNavigation from './navigation/RootNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <RootNavigation />
    </NavigationContainer>
  );
}

---

尝试从您的

App.js

中的

视图中删除上面的样式。我认为背景颜色：“白色”就是原因。@KartikeyVaish我做了，但仍然没有工作：（检查我在回答中提供的

snakp

链接……它工作得很好。）fine@KartikeyVaish是的，我刚刚做了，它可以工作。但在我的情况下，我没有使用expo，我使用的是react-native cli，这可能就是原因。我确实这样做了，但我仍然得到了相同的结果。请注意，我使用的是react-native cli，而不是expo，它工作得很好h世博会。