如何在React Native中为自定义选项卡更改文本颜色和图像

Question

我已经在应用程序中添加了自定义的标签栏。它在屏幕的中央。一次应激活一个选项卡。因此，我的自定义标签栏中有4个标签。默认情况下，我显示的第一个选项卡处于活动状态，所以，我也显示活动的文本（黑色）和图像。

如果用户点击第二个选项卡，则第一个，第三个，第四个选项卡应处于不活动状态，并且图像和灰色文本均处于不活动状态。

对于所有这些选项卡操作/处理程序，我已经创建了单个方法并传递了选项卡名称，据此，我能够区分它们并执行任务。

  

这是我的代码

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { selectedLanguage: null}
  }

  onClick = (language) => { 
    this.setState({selectedLanguage: language}) 
  }

  renderBottomContent = () => {
    const {selectedLanguge} = this.state
    switch(selectedLanguage) {
      case "telugu":
        return <View><Text>Telugu</Text></View>
      case "tamil":
        return <View><Text>Tamil</Text></View>
      case "hindi":
        return <View><Text>Hindi</Text></View>
      case "english":
        return <View><Text>English</Text></View>
      default:
        return <View><Text>No Language Selected...</Text></View>
    }
  }

  render() { 
    <View style ={styles.tabInnerContainer}>
      <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
        <Image style={styles.tabItemsImages} source={image} />
      <Text style={styles.tabTextItems}>
        Telugu
      </Text>
      </TouchableOpacity>
    </View>
    <View style ={styles.tabInnerContainer}>
      <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
        <Image style={styles.tabItemsImages} source={image} />
      <Text style={styles.tabTextItems}>
        Tamil
      </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('Hindi')}>
        <Image style={styles.tabItemsImages} source={image} />
      <Text style={styles.tabTextItems}>
        Telugu
      </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('English')}>
        <Image style={styles.tabItemsImages} source={image} />
      <Text style={styles.tabTextItems}>
        Telugu
      </Text>
      </TouchableOpacity>
    </View>
... 
    // after all the other tab buttons, render bottom content depending on the component state
    {this.renderBottomContent()}
  }
}

有人建议我，如何根据活动和非活动状态更改所有标签的文本和图像？

Answer 1

您可以执行以下操作：

then

然后，您只需为禁用的图像和禁用的文本定义样式。它不是很干，因为您需要为每个选项卡检查一次selectedLanguage，但它可以工作。