React native 如何在react导航中实现完全自定义的选项卡栏？

解释

我想创建一个完全自定义的选项卡栏，如下所示：

我知道

react-navigation

createBottomTabNavigator

组件可以使用此选项

tabBarComponent

因此，如果我创建一个完全自定义的组件，它有一个背景色，并且它也附着在底部。因此，如果我把我的组件向上移动一点，它确实会向上移动，但它也会从底部扩展。正如你在这里看到的：

（红色边框是我的自定义组件，带有一个marginBottom，但正如您所看到的，它仍然附着在底部，因此我认为可以使背景色透明，但这没有任何作用。下面是我尝试的方法：

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

---

实现这一点的最佳方法是什么？我是否需要TabNavigator或其他导航器？如何将背景颜色设置为透明？

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

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

const TabBarNavigation=（）=>{
返回(
({
tabBarIcon:（{聚焦，颜色，大小}）=>{
如果（route.name==“1”）返回按钮1（）；
如果（route.name==“2”）返回按钮2（）；
返回按钮3（）；；
},
})}
禁忌选项={{
showLabel:错误
}}>
);
};
常量按钮1=（）=>{
返回(
);
}
常量按钮2=（）=>{
返回(
);
}
常量按钮3=（）=>{
返回(
);
}
const styles=StyleSheet.create({
highButton：{
底部：“50%”
}
});

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

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

const TabBarNavigation=（）=>{
返回(
({
tabBarIcon:（{聚焦，颜色，大小}）=>{
如果（route.name==“1”）返回按钮1（）；
如果（route.name==“2”）返回按钮2（）；
返回按钮3（）；；
},
})}
禁忌选项={{
showLabel:错误
}}>
);
};
常量按钮1=（）=>{
返回(
);
}
常量按钮2=（）=>{
返回(
);
}
常量按钮3=（）=>{
返回(
);
}
const styles=StyleSheet.create({
highButton：{
底部：“50%”
}
});