如何在 React 导航中自定义 tabBar 组件的样式

Question

我已经为我的材料顶部选项卡导航器创建了tabBar组件导航工作正常，我想不出设置选项卡栏组件样式的方法这就是我如何称呼我的标签栏组件：

tabBarComponent:({navigation})=>{return <CustomTab pprop={navigation} />} ,

导航正如我所说，它没有错误，但我尝试找到一种方法来设置我的自定义组件的样式，如果我做：

tabBarComponent:({navigation})=>{return <CustomTabBar pprop={navigation} style = {{tabBarOptions: {
      scrollEnabled: true,
      labelStyle: {
        fontSize: 10,
        paddingTop:10,
      },
      tabStyle: {
        width: Dimensions.get('window').width / 3,
      } 
} }}/>} ,

这些样式不会影响我的组件，如果我去 CustomTabBar 组件尝试在那里设置样式这个解决方案不起作用，你能帮我解决我的问题吗，这就是我在组件内部的样式

      <CustomTabBar
                  style={{ tabStyle: {
                    width: Dimensions.get('window').width / 3,
                  },  activeTintColor : 'white',
                  inactiveTintColor : '#ddd',
                  showIcon : true,
                  showLabel: true,
                  tabBarOptions: {
                    scrollEnabled: true,
                    labelStyle: {
                      fontSize: 90,
                      paddingTop:10,
                    }}
                }}
/>

Answer 1

我认为您的CustomTabBar具有错误的属性，无法设置您的样式。例如，inactiveTintColor是tabBarOptions的道具。所以我认为您的自定义组件应该像

        <CustomTabBar
                     style={{
                        width: Dimensions.get('window').width / 3,
                      }}/>

其他道具应该设置为createBottomTabNavigator功能或其他东西。