当前选项卡在 React Navigation 5 中处于活动状态时如何在底部选项卡顶部添加一行
How to add a line at top of the bottom tab when the current tab is active in react navigation 5
我想在底部标签的顶部添加一行,如何添加?
喜欢这个问题https://github.com/react-navigation/react-navigation/issues/8957
React 导航版本:
"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",
您可以使用如下自定义按钮
const CustomTabButton = (props) => (
<TouchableOpacity
{...props}
style={
props.accessibilityState.selected
? [props.style, { borderTopColor: 'red', borderTopWidth: 2 }]
: props.style
}
/>
);
并在初始化导航时将其作为 tabBarButton 提供。
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarButton: CustomTabButton,
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarButton: CustomTabButton,
}}
/>
</Tab.Navigator>
你可以试试下面的小吃
https://snack.expo.io/6lMAe57lM
我想在底部标签的顶部添加一行,如何添加? 喜欢这个问题https://github.com/react-navigation/react-navigation/issues/8957
React 导航版本:
"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",
您可以使用如下自定义按钮
const CustomTabButton = (props) => (
<TouchableOpacity
{...props}
style={
props.accessibilityState.selected
? [props.style, { borderTopColor: 'red', borderTopWidth: 2 }]
: props.style
}
/>
);
并在初始化导航时将其作为 tabBarButton 提供。
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarButton: CustomTabButton,
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarButton: CustomTabButton,
}}
/>
</Tab.Navigator>
你可以试试下面的小吃 https://snack.expo.io/6lMAe57lM