像 Instagram 上的 React Native 底部标签栏

Question

我在 React Native 中搜索了很多关于 Navigation 的内容。我看到了很多可能性，但我从未在 Instagram 上找到过类似的东西。我确实找到了一个底部标签栏导航，但总是有：

a) 动画

b) 文本

c) 一种颜色

d) .........

但我从来没有找到这样的酒吧。 我是否必须为 Nativgation 使用 React Navigation 或者它只是有用吗？如果我不使用它怎么办？ :) 我怎么能做这样的菜单栏 （我想你们都知道 Instagram 导航的工作原理）:

顺便说一句。我不使用世博会:)

Answer 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'
                }}
            />

像 Instagram 上的 React Native 底部标签栏

React Native Bottom Tab bar like on Instagram

react-native

react-navigation