Реагировать родной - TouchableHighlight: удалить выделение после OnPress?

Question

Я разрабатываю простое приложение на основе реагирования и сталкиваюсь с проблемой TouchableHighlight:

При нажатии TouchableHighlightотображается новый экран (с помощью StackNavigator из react-navigation). После нажатия кнопки "Назад" и возврата к исходному экрану TouchableHighlight все еще имеет черный цвет фона - это означает, что он все еще выделен.

Мои вопросы:

• Есть ли способ вручную отключить выделение TouchableHighlight-составная часть? Таким образом, я мог отключить подсветку после onPress побежал.
• Какие могут быть возможные причины, почему TouchableHighlight остается выделенным? Я использую его в других частях моего приложения без навигации, и я могу представить, что это связано с этим.

TouchableHighlight существует в FlatList. Метод renderItems выглядит следующим образом:

let handlePress = () => {
    this.props.navigation.navigate('DetailsScreen');
};
return <TouchableHighlight
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableHighlight>;

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Я тестировал код на Android, используя Genymotion-эмулятор с Marshmallow.

Версии:

• узел -v: 8.9.4
• npm -v: 5.6.0
• response-native-cli: 2.0.1
• реактивный: 0.54.2
• реактивная навигация: 1.5.2
• Среда сборки: Windows 10 64-битная

На данный момент, я совершенно уверен, что ошибка где-то в моем коде, как TouchableHighlight работает правильно на других частях моего приложения, и, вероятно, это связано с навигацией вызова, но я не смог точно определить, почему именно. Я убедился, что в моем приложении нет исключений или чего-то подобного и что метод onPress завершается успешно.

Answer 1

После использования подсказки от @Kartiikeya и обмена TouchableHighlight с TouchableOpacity и обратно к TouchableHighlightтеперь он работает как положено:

Теперь, после onPress была выполнена, кнопка (будь то TouchableOpacity или TouchableHighlight) теряет свой эффект.

Я не уверен, почему это работает сейчас. Очевидная причина состоит в том, что перекомпиляция исходного кода исправляет ошибки - но я перекомпилировал его для написания исходного вопроса несколько раз, так что это не может быть вариантом. Другим пользователям я бы посоветовал очистить любой возможный кеш, и особенно делать следующие шаги:

• Закройте и снова откройте эмулятор Android / перезапустите тестирующее устройство
• Перезагрузите сборку ПК
• Перекомпилируйте весь исходный код
• Проверьте в своей консоли на наличие ошибок и / или исключений (очевидно)
• замещать TouchableHighlight с TouchableOpacity, перекомпилируйте, проверьте, если ошибка все еще существует - и если нет, повторно обмен TouchableOpacity в TouchableHighlight

Answer 2

Вы можете заменить Touchable Highlight на Touchable opacity и просто установить для свойства activeOpactity значение 1. Оно не будет выделять печать.

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>

Answer 3

Вы можете заменить Touchable Highlight на Touchable opacity. Это не выделит прессу.

    return <TouchableOpacity
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableOpacity >;

Answer 4

Для меня, мне нужно было отключить эффект подсветки после запуска onLongPress. Вы можете просто поменять клавишу сенсорного с помощью повторного рендеринга, когда вы хотите удалить его.

Вот пример:

 <TouchableHighLight
   onPress={this.pressRow}
   style={styles.outerContainer}
   onLongPress={() => this.setState({ onLongPressed: true })}
   onPressOut={() => this.setState({ onLongPressed: false })}
   key={`long-pressed-${this.state.onLongPressed ? 'yes' : 'no'}`}>
  <View style={styles.innerContainer}>
    {rowText}
    {rowIcon}
  </View>
</TouchableHighLight>

Answer 5

Следуя ответу Леонардо Лусоли, вам также следует добавить одну вещь:

  useEffect(() => {
    if(isLongPressed){
      setIsLongPressed(false)
    }
  }, [isLongPressed])

Этот шаг необходим, потому что, когда запускается первое событие onLongPress, оно устанавливает isLongPressed в значение true и, таким образом, изменяя ключ, компонент повторно отображается и идентифицируется как новый компонент, а предыдущие списки событий отбрасываются, поэтому onPressOut не будет запущен. Так

когда для isLongPressed установлено значение true, компонент выполняет повторный рендеринг, а затем мы сразу же устанавливаем для него значение false и, таким образом, получаем ожидаемое поведение. В противном случае мы получим неожиданное поведение, за которым последует одно ожидаемое поведение.