Question

我是新来的本地人。我使用了Flat Grid，并且想要访问图像组件on click event。我想更新其图像，但无法访问该图像标签。在单击网格项时，我要更新图像src。

场景：-

我有一个食谱列表，单击它们后，我想通过使图标打勾来显示它们。

下面是我使用的平面网格。

<FlatGrid
itemDimension={130}
items={this.state.recipie_listing}
renderItem={({ item, index }) => (
<TouchableOpacity               
onPress={() => this.AddRecipe(index, item.id)}>
<View>
<ImageBackground
style={{
height: 250,
width: "100%"
}}
  imageStyle={{ borderRadius: 10 }}
  source={{
  uri: item.image
 }}
>
<Icon
name={this.state.icon_name}
style={{
color: this.state.icon_color,
position: "absolute",
right: 2,
top: 2
}}
/>

<View
style={{
backgroundColor: "rgba(220, 222, 224, 0.8)",
height: 60,
width: "100%",
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "absolute",
bottom: 0 
}}
>
 <CustomText
style={{
marginStart: 10,
marginEnd: 5,
color: "white",
fontSize: 15,
fontWeight: "bold"
}}
>
 {item.name}
</CustomText>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)}
/>

Answer 1

首先，将诸如showImage之类的状态变量添加到false，然后

在AddRecipe方法中，调用setState方法并切换变量值，然后在要加载图像的位置src添加条件渲染这是一个代码示例

  state = { showImage : false}
  ------
  AddRecipe = () =>{
      this.setState({
         showImage:!this.state.showImage   
      })

  render(){
    return(
      ----------
     <ImageBackground
        style={{
        height: 250,
        width: "100%"
        }}
        imageStyle={{ borderRadius: 10 }}
        source={{
        uri: this.state.showImage === true ? src1 : src2 
        }}
      >
      ----------
     )

  }

据我所知，这将对您有所帮助。

如何在React Native中访问子视图？

1 个答案: