从昨天开始,我就一直卡在这个问题上,找不到解决办法。
我一直在尝试调整iPhone X中safeArea的颜色,在顶部很好用,在没有标签的屏幕中,底部也很好用,但是,在有标签导航的屏幕中,底部的safeArea总是白色,如截图所示。有人知道如何解决这个问题吗?
另外,我想问一下,如果使用普通的SafeAreaView组件,去掉SafeAreaProvider,去掉react-native-safe-area-context包会不会更好,我只是为了解决这个问题而添加了它作为试用,但我是先用react native普通的SafeAreaView组件。
在App组件中。
import { SafeAreaProvider } from "react-native-safe-area-context";
<SafeAreaProvider>
<NavigationContainer>
<CatNavigator />
</NavigationContainer>
</SafeAreaProvider>
在CatNavigator组件中:
const CatNavigator = () => {
return (
<Drawer.Navigator
initialRouteName="Home" >
<Drawer.Screen
name="Home"
component={SettingsNavigator}
options={{ title: "Inicio" }}
/>
</Drawer.Navigator>
在设置选项卡导航器中:
const SettingsNavigator = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
const iconType = Platform.OS === "ios" ? "ios" : "md";
if (route.name === "Home") {
iconName = iconType + "-home";
} else if (route.name === "Settings") {
iconName = iconType + "-settings";
}
const tabColor = focused ? Colors.buttonBackColor : Colors.titleColor;
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: Colors.activeTabColor,
inactiveTintColor: Colors.inactiveTabColor,
activeBackgroundColor: Colors.tabBackgroundColor,
inactiveBackgroundColor: Colors.tabBackgroundColor,
safeAreaInset: { bottom: "never", top: "never" },
}}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={{ title: "Inicio" }}
/>
<Tab.Screen
name="Settings"
component={SettingStackNavigator}
options={{ title: "Ajustes" }}
/>
</Tab.Navigator>
在SettingsNavigator中:
const SettingStackNavigator = (props) => {
return (
<SettingStack.Navigator screenOptions={defaultNavOptions}>
<SettingStack.Screen
name="Settings"
component={SettingScreen}
options={settingsOptions}
/>
</SettingStack.Navigator>
);
};
最后在SettingScreen中。
import { SafeAreaView } from "react-native-safe-area-context";
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: Colors.backgroundColor,
justifyContent: "center",
alignItems: "center",
}}
>
{colorScheme === "dark" && <StatusBar barStyle="light-content" />}
// Other components
</SafeAreaView>
如果你想改变那个小家伙在底部的颜色,你需要添加样式选项到您的Tab.Navigator,像这样的
tabBarOptions={{
style: {
backgroundColor: Colors.tabBackgroundColor,
},
}}