How to change Text color and Image for customized tabs in React Native

问题

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.

Here is my code

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?

回答1:

You could do something like this:

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>
    ...

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.

来源：https://stackoverflow.com/questions/54440904/how-to-change-text-color-and-image-for-customized-tabs-in-react-native

标签

reactjs

image

react-native

text

tabs