Question

说明

我想创建一个完全自定义的标签栏，如下所示：

我知道react-navigation createBottomTabNavigator组件可以采用此选项tabBarComponent

因此，如果我创建一个完全自定义的组件，则它具有背景色，并且还附加在底部。因此，如果我将组件向上移动一点，的确可以，但是它也会从底部扩展。如您所见：

（红色边框是我的自定义组件，带有marginBottom，但是正如您所看到的，它仍然附着在底部，所以我认为也许可以使backgroundColor透明，但是什么也没做。这是我尝试的方法：

{
    tabBarComponent: TabBar,
    tabBarOptions: {
      activeTintColor: '#4F4F4F',
      inactiveTintColor: '#ddd',
      style: {
        backgroundColor: 'transparent',
      },
    },
  },

实现此目标的最佳方法是什么？我是否甚至需要TabNavigator或其他导航器？如何将背景色设置为透明？

Answer 1

您可以使用带有图像的提升按钮。要为每个选项卡提供图像，您需要为tabBarIcon prop（可以是任何组件）提供一个自定义图标，我在示例中只是创建了基本组件button1，button2，button3。

我刚刚添加了一个底部样式的道具来提升按钮，但是由于它是完全自定义的组件，因此应该有多种实现方法。

    const TabBarNavigation = () => {
    return (
        <NavigationContainer>
          <Tab.Navigator
                  screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        if (route.name === '1') return button1();
                        if (route.name === '2') return button2();
                        return button3();;
                    },
                  })}
                  tabBarOptions={{
                    showLabel: false
                  }}>
            <Tab.Screen name={'1'} component={FirstScene} />
            <Tab.Screen name={'2'} component={SecondScene} />
            <Tab.Screen name={'3'} component={ThirdScene} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    };

    const button1 = () => {
        return (
            <View style={styles.highButton}>
              <Image source={require("../assets/icons/image1.png")}/>
            </View>
        );
    }

    const button2 = () => {
        return (
            <View style={styles.highButton}>
              <Image source={require("../assets/icons/image2.png")}/>
            </View>
        );
    }

    const button3 = () => {
        return (
            <View style={styles.highButton}>
              <Image source={require("../assets/icons/image3.png")}/>
            </View>
        );
    }

    const styles = StyleSheet.create({
        highButton: {
            bottom: '50%'
        }
    });

如何在反应导航中实现完全自定义的标签栏？

1 个答案: