Not able to set active and inactive images in React Native

问题

I am showing custom tab-bar in my application which is showing at centre of the screen. So, Each time one tab should be active and other tabs will be inactive state. According to that, I have implemented logic(bool values) and tried to change images, But, It's not working.

My requirement is

I have 4 tabs, suppose if user tap on 1st tab, I have to set active image to 1st tab then rest of 3 tabs with inactive images according to those titles (different inactive) images.

Its like for all tabs active and inactive states, each time one tab only active state.

It's showing undefined and even if and else if conditions executing, But, nothing changing images.

Here is my code

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

Can anyone suggest me, Where I am doing wrong?

And in the method renderBottomContent(), these flagForTelugu, flagForTamil, flagForHindi, flagForEnglish showing as undefined while debugging time.

回答1:

I'm not good to explaining how the code works.

but the idea is you need 1 state called selectedIndex and the rest is you need to check the active image with the selectedIndex is match show the active image

the example code may looks like this:

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

and the result look like :

来源：https://stackoverflow.com/questions/54474473/not-able-to-set-active-and-inactive-images-in-react-native