React Native — как установить blurRadius на выбранное изображение

Мое приложение отображает изображения и другую информацию, получая данные из JSON, и я хочу установить 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>
    </>
)}
/>
)}

Я хочу изменить значение {blur} для данного изображения, когда я касаюсь компонента TouchableOpacity изображения, которое я хочу размыть. Прямо в этот момент, когда я нажимаю на изображение, все изображения в списке становятся неразмытыми.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны добавить значения размытия внутри ваших элементов, как это. Создайте новые компоненты с именем Items. Затем добавьте в него состояние размытия. (не внутри Главного).

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». Таким образом, изображение будет размываться, когда палец коснется изображения, а не нажимает на него. Но это было твое решение.

Другие вопросы по теме