Как изменить цвет текста и изображения для настраиваемых вкладок в React Native - PullRequest
Новая
       13

Как изменить цвет текста и изображения для настраиваемых вкладок в React Native

0 голосов
/ 30 января 2019

Я добавил настраиваемую панель вкладок в свое приложение.Он находится в центре экрана.Одновременно должна быть активна одна вкладка.Итак, у меня есть 4 вкладки в моей пользовательской панели вкладок.По умолчанию я показываю, что первая вкладка активна, поэтому я показываю активный текст (черный цвет) и изображение тоже.

Если пользователь нажимает на 2-ю вкладку, 1-я, 3-я, 4-я вкладки должны быть в неактивном состояниис неактивными изображениями в соответствии с текстом серого цвета.

Для всех этих вкладок action / handler я создал один метод и передаю имя вкладки, в соответствии с которым я могу их дифференцировать и выполнять задачу.

Вот мой код 

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

enter image description here

Кто-нибудь подскажет мне, Как изменить все вкладки текста и изображений в соответствии с активнымии неактивные состояния?

1 Ответ

0 голосов
/ 30 января 2019

Вы можете сделать что-то вроде этого: 

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

Затем вы просто определяете стиль для отключенных изображений и отключенного текста.Это не очень СУХО, потому что вам нужно проверять выбранный язык дважды для каждой вкладки, но это работает.

...