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

我将在应用程序中显示自定义选项卡,它显示在屏幕中央。因此,每次一个选项卡应该处于活动状态,而其他选项卡将处于非活动状态。 根据这一点,我已经实现了逻辑(bool值),并尝试更改图像,但它不起作用。

我的要求是

我有4个选项卡,假设用户点击第一个选项卡,我必须设置为活动 图像到第一个选项卡,然后剩余的3个选项卡具有不活动的图像,根据 这些标题(不同的非活动)图像。

类似于所有选项卡的活动和非活动状态,每次一个选项卡 仅活动状态。

它显示未定义的,即使执行条件为if或else,但不会改变图像。

这是我的密码

    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、flagforinglish显示为未定义的while 调试时间。