如何更改为react-native-tab-view的颜色？

问题描述

我是本机和学习新手。在学习react-native-tab-view时，我试图更改它的颜色，但是经过几次尝试后我还是无法做到。如果有人指导我如何更改选项卡栏的颜色（默认情况下为蓝色），我将不胜感激。 Here is the link to npm react-native-tab-view，这是代码段。任何帮助将不胜感激。

    private List<CoordinateBE> getCoordinate(final JsonNode positionNodes) {
        
        final List<CoordinateBE> listofEntrances = new ArrayList<>();
        for (JsonNode positionNode : positionNodes) {
            final CoordinateBE coordinateBE = new CoordinateBE();
            coordinateBE.setLatitude(positionNode.get("lat").asDouble());
            coordinateBE.setLongitude(positionNode.get("lng").asDouble());
            listofEntrances.add(coordinateBE);
        }
        return listofEntrances;
    }

解决方法

更改标签栏的背景颜色

如果您引用此section，则在使用renderTabBar道具声明自定义React组件之后，必须通过标签栏的样式道具。

<TabView
  navigationState={{ index,routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={initialLayout}
  renderTabBar={props => <TabBar {...props} style={{backgroundColor: 'black'}}/>} // <-- add this line
/>

更改标签栏的文本颜色

如果您提到此事，

<TabBar
  renderLabel={({route,color}) => (
    <Text style={{ color: 'black',margin: 8 }}>
      {route.title}
    </Text>
  )}
  style={{backgroundColor: 'white'}}
  ...
/>

随时使用example snack进行进一步的实验。 ：）

,

您需要创建自定义react-native-tab-view-custom-tabbar

更多详细信息，请点击react-native-tab-view#readme