我在 React Native 中搜索了很多关于导航的信息。我看到了很多可能性,但我从未在 Instagram 上找到过类似的东西。我确实找到了底部标签栏导航,但总是有:
a) 动画
b) 一段文字
c) 一种颜色
d) .........
但我从未找到过这样的酒吧。 我是否必须使用 React Navigation 进行 Nativgation 或者它只是有帮助?如果我不使用它呢? :) 我怎么能做这样的菜单栏(我想你们都知道 Instagram 导航是如何工作的):
顺便说一句。我不使用世博会:)
答案 0 :(得分:1)
我使用 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
是因为 @react-navigation/bottom-tabs
有很多问题。
要在底部使用,您可以这样做:
const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
initialRouteName="Home"
tabBarPosition="bottom"
lazy={true}
tabBarOptions={{
activeTintColor: colors.orange,
inactiveTintColor: 'gray',
showIcon: true,
indicatorStyle: { backgroundColor: 'transparent' },
labelStyle: {
fontFamily: 'GothamRounded-Bold',
fontSize: widthPercentageToDP('3%'),
bottom: 1.5,
alignSelf: 'flex-start'
},
activeTintColor: colors.orange,
inactiveTintColor: colors.greyLight,
style: {
elevation: 5,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: {
height: 1,
width: 0
},
position: 'absolute',
width: widthPercentageToDP('100%'),
zIndex: 8,
borderTopColor: 'transparent',
bottom: keyboard,
justifyContent: 'center'
},
upperCaseLabel: false
}}>
...
然后您可以根据需要进行自定义
要更改图标,我这样做:
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<FastImage
source={focused ? homeOrange : homeGrey}
style={{ flex: 1, width: null, height: null }}
resizeMode="contain"
/>
),
tabBarLabel: 'Home'
}}
/>