无法在React Native中设置活动和非活动图像 [英] Not able to set active and inactive images in React Native
本文介绍了无法在React Native中设置活动和非活动图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在我的应用程序中显示自定义标签栏，该标签栏显示在屏幕中央。因此，每次一个选项卡应处于活动状态，而其他选项卡将处于非活动状态。
据此，我已经实现了逻辑（布尔值）并试图更改图像，但是，它不起作用。
我的要求是
我有4个标签，假设如果用户点击第一个标签，我必须将活动的
图像设置为第一个标签，然后将其余3个标签设置为
这类似于所有选项卡的活动和非活动状态，每次只有一个选项卡
它显示了未定义的状态，即使条件执行，也没有任何变化。
这是我的代码
构造函数（props）{
super（props） ;
// this.state = {dataArray：getListData（）}
this.state = {selectedTab：值，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 ==='泰卢固语'）{
this.flagForTelugu = true
this.flagForTamil =假
this.flagForHindi =假
this.flagForEnglish =假
}否则，如果（selectedTab == ='Tamil'）{
this.flagForTamil =真
this.flagForTelugu =假
this.flagForHindi =假
this.flagForEnglish =假
}否则，如果（ selectedTab ==='Hindi'）{
this.flagForHindi = true
this.flagForTamil =假
this.flagForTelugu =假
this.flagForEnglish =假
}否则if（selectedTab ==='English'）{
this.flagForEnglish = true
this.flagForTamil = false
this.flagForTelugu = false
this.flagForHindi = false
}
//在底部
处加载其他文本}
render （item）{
const {selectedTab，flagForTelugu，flagForTamil，flagForHindi，flagForEnglish} = this.state;
return（
< View style = {styles.container}>
< View style = {styles.tabContainer}>
< TouchableOpacity样式= {styles.tabIcons} onPress = {（）=> this.OnTabItemHandler（'Telugu'）}>
<图片
style = {styles.tabItemsImages}
source = { this.state.flagImage === true吗？
teluguActiveImage：
teluguDeActiveImage}
/>
< / TouchableOpacity>
<文本样式= {样式。 tabTextItems} onPress = {（）=> this.OnTabItemHandler（'Telugu'）}>泰卢固语< / Text>
< / View>
< View style = {styles .tabContainer}>
< TouchableOpacity style = {styles.tabIcons} onPress = {（）=>此.OnTabItemHandler（'Tamil'）}>
< Image
style = {styles.tabItemsImages}
source = {this.state.flagImage === true吗？
tamilActiveImage：
tamilDeActiveImage}
/>
< / TouchableOpacity>
< Text style = {styles.tabTextItems} onPress = {（）=> this.OnTabItemHandler（’Tamil’）}>泰米尔语< / Text>
< / View>
<查看样式= {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'）}>印地语< / Text>
< / View>
<查看样式= {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'）}>英文< / Text>
< / View>
< / View>
{this.renderBottomContent（item）}
< / View>
）;
}
有人可以建议我，我在做什么
然后在方法renderBottomContent（）中，在
调试时，这些flagForTelugu，
flagForTamil，flagForHindi，flagForEnglish显示为未定义。 p>
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.
解决方案
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 :
这篇关于无法在React Native中设置活动和非活动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
