React Native - 如何将 blurRadius 设置到选定图像上

Question

我的应用程序显示从 JSON 获取数据的图像和其他信息，我想在调用 unblur 函数时在所选图像上设置 blurRadius。

我的代码如下：

const [blur, setBlur] = useState(160);
const unblur = () => {
if(blur == 160){
    setBlur(0);
}
}


{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
    <>
    <Text style={{ textAlign: "left", color: 'white', fontSize: 24 }}>
        <Image style={{ alignSelf: "center" }} source={{uri: item.profile_picture, width: 48, height: 48}} />
        {item.username}
    </Text>
    <TouchableOpacity onPress={() => unblur()}>
        <Image style={{ alignSelf: "center" }} blurRadius={blur} source={{uri: item.picture, width: 400, height: 320}} />
    </TouchableOpacity>
    <Text style={{ textAlign: "left", color: 'white', fontSize: 24 }}>
        ID {item.id} 
    </Text>
    <Text>
        {'\n'}{'\n'}
    </Text>
    </>
)}
/>
)}

我想在点击要取消模糊的图像的 TouchableOpacity 组件时更改给定图像的 {blur} 值。就在这一刻，当我点击一张图片时，列表中的所有图片都变得清晰了。

Answer 1

您应该像这样在项目中添加模糊值。创建一个名为 Items 的新组件。然后，在其中添加模糊状态。（不在 Main 内）。

const Main = () => {
  if (isLoading) {
    return;
    <ActivityIndicator />;
  }

  return (
    <FlatList
      data={data}
      keyExtractor={({ id }, index) => id}
      renderItem={({ item }) => <Item item={item} />}
    />
  );
};

const Item = ({ item }) => {
  const [blur, setBlur] = useState(160);
  const unblur = () => {
    if (blur == 160) {
      setBlur(0);
    }
  };

  return (
    <>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24 }}>
        <Image
          style={{ alignSelf: "center" }}
          source={{ uri: item.profile_picture, width: 48, height: 48 }}
        />
        {item.username}
      </Text>
      <TouchableOpacity onPress={() => unblur()}>
        <Image
          style={{ alignSelf: "center" }}
          blurRadius={blur}
          source={{ uri: item.picture, width: 400, height: 320 }}
        />
      </TouchableOpacity>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24 }}>
        ID {item.id}
      </Text>
      <Text>
        {"\n"}
        {"\n"}
      </Text>
    </>
  );
};

另外，我建议你可以使用'onPressIn'。这样，当手指点击图像而不是按下图像时，图像将不模糊。但那是你的决定。

React Native - 如何将 blurRadius 设置到选定图像上

React Native - How to set blurRadius onto a selected image

javascript

reactjs

react-native