Не удается установить активные и неактивные изображения в React Native

Question

Я показываю пользовательскую панель вкладок в моем приложении, которая отображается в центре экрана.Таким образом, каждый раз, когда одна вкладка должна быть активной, а другие вкладки будут в неактивном состоянии.В соответствии с этим, я реализовал логику (значения bool) и попытался изменить изображения, но это не работает.

Мое требование:

У меня есть 4 вкладки, предположим, если пользовательнажмите на 1-й вкладке, я должен установить активное изображение на 1-ю вкладку, а затем остальные 3 вкладки с неактивными изображениями в соответствии с этими названиями (разные неактивные) изображения.

Это похоже на все вкладки, активные и неактивные состояния, каждый разтолько одна вкладка, только активное состояние.

Показывает неопределенное и даже если и если условия выполняются, но ничего не меняет изображения.

Вот мой код

    constructor(props) {
        super(props);
     //   this.state = { dataArray: getListData()}
        this.state = { selectedTab: 'Value', flagImage:true, flagForTelugu: false, flagForTamil: false, flagForHindi: false, flagForEnglish: false}
     }

    OnTabItemHandler = (tabItem) => {
        this.setState({selectedTab: tabItem,flagImage:this.state.flagImage})
    }

    renderBottomContent = (item) => {
        const {selectedTab, dataArray, flagForTelugu, flagForTamil, flagForHindi, flagForEnglish} = this.state 
        this.state = { dataArray: getListData()}    
        if (selectedTab ===  ‘Telugu’) {
            this.flagForTelugu = true
            this.flagForTamil = false
            this.flagForHindi = false
            this.flagForEnglish = false
        } else if (selectedTab ===  ‘Tamil’) {
            this.flagForTamil = true
            this.flagForTelugu = false
            this.flagForHindi = false
            this.flagForEnglish = false
        } else if (selectedTab ===  ‘Hindi’) {
            this.flagForHindi = true
            this.flagForTamil = false
            this.flagForTelugu = false
            this.flagForEnglish = false
        } else if (selectedTab ===  ‘English’) {
            this.flagForEnglish = true
            this.flagForTamil = false
            this.flagForTelugu = false
            this.flagForHindi = false
        } 

     //loading some other text here in bottom
}

    render(item) {
        const {selectedTab, flagForTelugu, flagForTamil, flagForHindi, flagForEnglish} = this.state;
return (
            <View style={styles.container}>

           <View style = {styles.tabContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={() => this.OnTabItemHandler(‘Telugu’)}>
                            <Image
                                style={styles.tabItemsImages}
                                source={this.state.flagImage === true ?                  
                                    teluguActiveImage : 
                                    teluguDeActiveImage}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={() => this.OnTabItemHandler('Telugu')}>Telugu</Text>
                    </View>

           <View style = {styles.tabContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={() => this.OnTabItemHandler(‘Tamil’)}>
                            <Image
                                style={styles.tabItemsImages}
                                source={this.state.flagImage === true ?                  
                                    tamilActiveImage : 
                                    tamilDeActiveImage}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={() => this.OnTabItemHandler('Tamil')}> Tamil </Text>
                    </View>

           <View style = {styles.tabContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={() => this.OnTabItemHandler(‘Hindi’)}>
                            <Image
                                style={styles.tabItemsImages}
                                source={this.state.flagImage === true ?                  
                                    hindiActiveImage : 
                                    hindiDeActiveImage}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={() => this.OnTabItemHandler('Hindi')}> Hindi </Text>
                    </View>

           <View style = {styles.tabContainer}>
           <TouchableOpacity style={styles.tabIcons} onPress={() => this.OnTabItemHandler(‘English’)}>
                            <Image
                                style={styles.tabItemsImages}
                                source={this.state.flagImage === true ?                  
                                    englishActiveImage : 
                                    englishDeActiveImage}
                            />
                        </TouchableOpacity>
                        <Text style={styles.tabTextItems} onPress={() => this.OnTabItemHandler('English')}> English </Text>
                    </View>
 </View>
              {this.renderBottomContent(item)}
          </View>
      );
   }

Может кто-нибудь подсказать мне, где я делаю не так?

А в методе renderBottomContent () эти flagForTelugu, flagForTamil, flagForHindi, flagForEnglish отображаются как неопределенные во время отладки.

Answer 1

Мне нехорошо объяснять, как работает код.

, но идея в том, что вам нужно 1 state с именем selectedIndex, а остальное - проверить активное изображение с помощью selectedIndex соответствует совпадению active изображение

пример кода может выглядеть следующим образом:

import React, { Component } from 'react';
import RN from 'react-native';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state={
      selectedIndex:0,
      //you can change every urlActive and urlInactive url to your needed image
      tabList:[
        {label:'tab 1', urlActive:'https://livelovely.com/static/images/full-listing/icon-modal-success%402x.png', urlInactive:'https://icon2.kisspng.com/20180823/ioc/kisspng-traffic-sign-image-traffic-code-no-symbol-inactive-symbol-www-pixshark-com-images-gallerie-5b7e884790b8a3.5710860815350190795928.jpg'},
        {label:'tab 2', urlActive:'https://livelovely.com/static/images/full-listing/icon-modal-success%402x.png', urlInactive:'https://icon2.kisspng.com/20180823/ioc/kisspng-traffic-sign-image-traffic-code-no-symbol-inactive-symbol-www-pixshark-com-images-gallerie-5b7e884790b8a3.5710860815350190795928.jpg'},
        {label:'tab 3', urlActive:'https://livelovely.com/static/images/full-listing/icon-modal-success%402x.png', urlInactive:'https://icon2.kisspng.com/20180823/ioc/kisspng-traffic-sign-image-traffic-code-no-symbol-inactive-symbol-www-pixshark-com-images-gallerie-5b7e884790b8a3.5710860815350190795928.jpg'},
      ]
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <RN.View style={{flex:1}}>
        //creating the tab height
        <RN.View style={{flex:0.07, flexDirection:'row'}}>
          {
            //loop throught the state
            this.state.tabList.map((item,index)=>{
              return(
                //the style just to make it beautiful and easy to debug
                <RN.TouchableOpacity style={{flex:1, alignItems:'center', backgroundColor:index==0?'green':index==1?'blue':'yellow'}}
                  //this onpress to handle of active selected tab
                  onPress={()=>{this.setState({selectedIndex:index})}}
                >
                  <RN.View>
                    <RN.Text>{item.label}</RN.Text>
                    <RN.Image
                      //here's the magic show off
                      source={{uri:this.state.selectedIndex==index?item.urlActive:item.urlInactive}}
                      style={{width:20, height:20, resizeMode:'contain'}}
                    />
                  </RN.View>
                </RN.TouchableOpacity>
              )
            })
          }
        </RN.View>
      </RN.View>
    );
  }
}

и результат будет выглядеть так: