Mi aplicación muestra imágenes y otra información que obtiene datos de un JSON, y quiero configurar un radio de desenfoque en la imagen seleccionada cuando se llama a la función de desenfoque .
Mi código es el siguiente:
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> </> )} /> )}Quiero cambiar el valor de {desenfoque} para una imagen determinada cuando toco el componente TouchableOpacity de la imagen que quiero desenfocar. Justo en este momento, cuando toco una imagen, todas las imágenes de la lista se desenfocan.
Debe agregar los valores de desenfoque dentro de sus elementos de esta manera. Cree un nuevo componente llamado Elementos. Luego, agregue el estado de desenfoque dentro de él. (no dentro de 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> </> ); };Además, puedo sugerir que puede usar 'onPressIn'. De esa manera, la imagen se desenfocará cuando el dedo toque la imagen, no presione la imagen. Pero esa fue tu decisión.