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

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

我的要求是

我有 4 个标签，假设如果用户点击第一个标签，我必须将活动图像设置为第一个标签，然后根据这些标题（不同的非活动）图像将剩余的 3 个标签设置为非活动图像。

就像所有选项卡处于活动状态和非活动状态一样，每次只有一个选项卡处于活动状态。

它显示 undefined 和 if 和 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>
      );
   }

谁能建议我，我哪里做错了？

而在renderBottomContent()方法中，这些flagForTelugu、flagForTamil、flagForHindi、flagForEnglish在调试时显示为undefined。