react-native - 如何在 react-native-tab-view 中更改选定选项卡的背景颜色

Question

我使用 react-native-tab-view。那么如何仅将背景颜色设置为选定的选项卡？
这就是我所拥有的...

<TabView
                navigationState={this.state}
                renderScene={SceneMap({
                  first: FirstRoute,
                  second: SecondRoute,
                  third: ThirdRoute,
                  fourth: FourthRoute,
                })}
                onIndexChange={index => this.setState({ index })}
                initialLayout={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}
                useNativeDriver = {true}
                renderTabBar={(props) =>
                    <TabBar
                      {...props}
                      indicatorStyle={{ backgroundColor: 'white' }}
                      style={{backgroundColor: "black", height: 40}}
                      renderIcon={this.renderIcon}
                      indicatorStyle={{backgroundColor: "#555555"}}
                    />
                  }
                />

谢谢！

Answer 1

这适用于文本样式更改。您的情况的唯一区别是，您不必更改内部“文本”标签renderlabel的样式，而必须更改“视图”标签的样式。

renderLabel={({ route }) => {
  return (
    <View> //THIS IS WHERE YOU PUT THE CONDITIONAL STYLING
      <Text
        style={
          route.key === props.navigationState.routes[this.state.index].key
            ? styles.selectedTabTextStyle
            : styles.label
        }
      >
        {route.title}
      </Text>
    </View>
  );
}}