代码之家 › 专栏 › 技术社区 › Anilkumar iOS Developer

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

tabs text react-native image reactjs

Anilkumar iOS Developer · 技术社区 · 6 年前

如果用户点击第二个选项卡,则第一、第三、第四个选项卡应处于非活动状态,并显示非活动图像和灰色文本。

这是我的密码

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

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

1 回复 | 直到 6 年前

dentemm 6 年前

你可以这样做:

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,但它是有效的。