onclick更改img不透明度- react native?

Question

我真的是新的反应原生，我在一个简单的应用程序与4图像和四个按钮工作，每个按钮应该改变图像的不透明度，但我失去了如何做到....有谁能告诉我该怎么做吗?

<View style={styles.card}>
<Image source={require('./assets/1.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 1</Text>
</View>
<View style={styles.card}>
<Image source={require('./assets/2.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 2</Text>
</View> 

const styles = StyleSheet.create({
cardImgStyle: {
width               : "100%",
height              : 140,
borderTopLeftRadius : 10,
borderTopRightRadius: 10,
marginBottom        : 3,
opacity: .2
},
});

Answer 1

也许你可以useState在这种情况下，在我看来，你可以处理对象上的id来选择的图像，你可以使用条件呈现时，用户选择，设置样式。选择timage并使用不透明度0.4。您可以查看下面的代码示例。希望我的解释能对你有所帮助。

const data = [
{
id: 1,
image : require('../../yourpath'),
id: 2, 
image: require('../../yourpath')
}
]
const = [ selected, setSelected ] = useState(0)
<FlatList
horizontal
pagingEnabled={true}
data={data}
style={{height:130 }}
renderItem={({item})=>{
const content =
selected === item.id
? style.selectImage   
: style.unSelectImage; 
return(
<View style={style.wrapper}>
<TouchableOpacity style={content}  onPress={()=>setSelectedId(item.id)}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image source={item.image} style={{height: 65, width: 60}}/>
</View>
<Text style={{color: 'black', textAlign: 'center', marginTop: 10}}>{item.title}</Text>
</TouchableOpacity>
</View>
)
}}/>