无法在 React Native 中设置活动和非活动图像

Question

我正在我的应用程序中显示自定义标签栏，它显示在屏幕中央。因此，每次一个选项卡应该处于活动状态，而其他选项卡将处于非活动状态。据此，我已经实现了逻辑（布尔值）并尝试更改图像，但是，它不起作用。

我的要求是

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.

它显示未定义，即使和 else if 条件执行，但是，没有任何改变图像。

这是我的代码

    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.

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

结果如下：

无法在 React Native 中设置活动和非活动图像

Not able to set active and inactive images in React Native

tabs

tabbar

ecmascript-6

react-native