React Native -如何在选定的图像上设置模糊半径

Question

我的应用程序显示图像和其他信息从JSON获取数据，我想在选定的图像上设置一个blurRadius当unblur

我的代码如下:

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'。这样，当手指轻触图像而不是按下图像时，图像将恢复模糊。但那是你的决定。