如何在React Native中为自定义选项卡更改文本颜色和图像 [英] How to change Text color and Image for customized tabs in React Native

问题描述

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

I have added customized tab-bar to my application. It is in centre of the screen. At a time one tab should be active. So, I have 4 tabs in my custom tab-bar. By default, I am showing first tab is active, So, I am showing active text(black color) and image too.

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

If user tap on 2nd tab, 1st, 3rd, 4th tabs should be with inactive state with inactive images according and Gray colour text.

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

For all those tabs action/handler I have created single method and passing tab name, according to that I am able to differentiating them and doing task.

这是我的代码

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()}
  }
}

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

Anyone suggest me, How to change all tabs text and images according to active and inactive states?

推荐答案

您可以执行以下操作:

render() { 
  const {selectedLanguge} = this.state;

  <View style ={styles.tabInnerContainer}>
    <TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
      <Image style={[styles.tabItemsImages, selectedLangage === 'telugu' && styles.disabledImageStyle]} source={image} />
        <Text style={[styles.tabTextItems, selectedLangage === 'telugu' && styles.disabledTextStyle]}>
          Telugu
        </Text>
      </TouchableOpacity>
    </View>
    ...

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

Then you just define a style for disabled images and disabled text. It is not very DRY, because you need to check the selectedLanguage twice for each tab but it works.

这篇关于如何在React Native中为自定义选项卡更改文本颜色和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！