英文:
React Navigation Active Tab color cover SafeArea
问题
我正在使用React Navigation Bottom Tabs开发一个应用，并希望突出显示活动选项卡的颜色与非活动选项卡不同。目前，我已经有了正确的突出显示颜色，但这种颜色没有填充手机底部的安全区域：
这是我的代码片段：
<MainTabs.Navigator
initialRouteName="HomeTab"
screenOptions={({ route }) => ({
headerShadowVisible: false,
tabBarStyle: {
backgroundColor: theme.colors.primaryColor,
},
tabBarActiveBackgroundColor: theme.colors.secondaryColor,
tabBarInactiveBackgroundColor: theme.colors.primaryColor,
tabBarActiveTintColor: theme.colors.white,
tabBarInactiveTintColor: theme.colors.white,
tabBarLabelStyle: {
fontSize: 12,
alignSelf: "center",
textAlign: "center",
fontFamily: theme.font.familyBold,
},
})}
>;
英文:
I'm working on an app using React Navigation Bottom Tabs and I want to highlight the active tab with a different color then when it's inactive. Currently, I have the correct highlight color, but that color is not filling up the safe area at the bottom of the phone:
And here's a snippet of my code:
<MainTabs.Navigator
initialRouteName="HomeTab"
screenOptions={({ route }) => ({
headerShadowVisible: false,
tabBarStyle: {
backgroundColor: theme.colors.primaryColor,
},
tabBarActiveBackgroundColor: theme.colors.secondaryColor,
tabBarInactiveBackgroundColor: theme.colors.primaryColor,
tabBarActiveTintColor: theme.colors.white,
tabBarInactiveTintColor: theme.colors.white,
tabBarLabelStyle: {
fontSize: 12,
alignSelf: "center",
textAlign: "center",
fontFamily: theme.font.familyBold,
},
})}
>
答案1
得分: 0
我找到了如何解决此问题的方法。以下是我的代码：
<MainTabs.Navigator
initialRouteName="HomeTab"
safeAreaInsets={{ bottom: 0 }}
screenOptions={({ route }) => ({
headerShadowVisible: false,
tabBarIconStyle: {
marginTop: 5,
},
tabBarStyle: {
backgroundColor: theme.colors.primaryColor,
height: 85,
},
tabBarActiveBackgroundColor: theme.colors.secondaryColor,
tabBarInactiveBackgroundColor: theme.colors.primaryColor,
tabBarActiveTintColor: theme.colors.white,
tabBarInactiveTintColor: theme.colors.white,
tabBarLabelStyle: {
fontSize: 12,
alignSelf: "center",
textAlign: "center",
fontFamily: theme.font.familyBold,
marginBottom: insets.bottom,
},
})}
>
基本上只需添加safeAreaInsets，然后在选项卡标签样式中添加marginBottom。insets 变量来自于使用 react-native-safe-area-context 中的 useSafeAreaInsets。
英文:
For anyone having the same issue, I found out how to fix it. Here's my code below:
<MainTabs.Navigator
initialRouteName="HomeTab"
safeAreaInsets={{ bottom: 0 }}
screenOptions={({ route }) => ({
headerShadowVisible: false,
tabBarIconStyle: {
marginTop: 5,
},
tabBarStyle: {
backgroundColor: theme.colors.primaryColor,
height: 85,
},
tabBarActiveBackgroundColor: theme.colors.secondaryColor,
tabBarInactiveBackgroundColor: theme.colors.primaryColor,
tabBarActiveTintColor: theme.colors.white,
tabBarInactiveTintColor: theme.colors.white,
tabBarLabelStyle: {
fontSize: 12,
alignSelf: "center",
textAlign: "center",
fontFamily: theme.font.familyBold,
marginBottom: insets.bottom,
},
})}
>
Basically just added safeAreaInsets and then marginBottom in the tab bar label style. the insets variable comes from using useSafeAreaInsets from react-native-safe-area-context
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论