Question

我正在使用react-native-community / react-native-tab-view 是否有任何方法可以更改选项卡更改选项卡文本颜色。现在它只是减轻文本颜色，但想将其更改为不同的颜色？

Answer 1

在这种情况下，请尝试将回调传递到renderLabel中的TabView属性，如下所示：

_renderLabel = (scene) => {
  const myStyle = { /* Defined your style here.. */ }
  // grab the label from the scene. I'm not really sure 
  // about the structure of scene, but you can see it using console.log
  const label = scene.label

  return (
    <Text style={myStyle}>{label}</Text>
  );
}

_renderHeader = () => {
  return <TabBar renderLabel={this._renderLabel} />
}

Answer 2

To change the text color on your TabBar, it should look like this: 
<TabBar
     {...props}
     indicatorStyle={{ backgroundColor: '#eeaf3b' }}
     style={{ backgroundColor: '#282828', height: 55 }}
     indicatorStyle={{ backgroundColor: '#eeaf3b', height: 5 }}
     renderLabel={this.renderLabel} />

然后renderLabel函数应如下所示：

renderLabel = ({ route, focused, color }) => {
return (
  <View>
    <Text
      style={[focused ? styles.activeTabTextColor : styles.tabTextColor]}
    >
      {route.title}
    </Text>
  </View>
)
}

然后您的样式应如下所示：

const styles = StyleSheet.create({
  activeTabTextColor: {
    color: '#eeaf3b'
  },
  tabTextColor: {
    color: '#ccc'
  }
})

React Native选项卡视图：如何在更改选项卡时更改文本颜色

2 个答案: