Реагировать на родной onPress с TouchableWithoutFeedback не работает

Question

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

class AlbumList extends React.Component {

    constructor(props)
    {
        super(props)
        this.state = {
            displayList : true
        }
    }
    componentWillMount() {
        this.props.fetchAlbums();
    }

    albumPressed(album)
    {
        console.log("Touch event triggered")
    }

    renderAlbumItem = ({item: album}) => {
        return (
                <TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
                    <Card>
                        <CardSection>
                            <Text>{album.artist}</Text>
                        </CardSection>
                        <CardSection>
                            <Text>{album.title}</Text>
                        </CardSection>
                    </Card>
                </TouchableWithoutFeedback>
            )
    }

    render() {
        let list;
        if (this.state.displayList) {
            list = <FlatList
                data={this.props.albums}
                renderItem={this.renderAlbumItem}
                keyExtractor={(album) => album.title}
            />
        }

        return (
            list
        )
    }
}

const mapStateToProps = state => {
    return state.albumList;
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        fetchAlbums : AlbumListActions.fetchAlbums
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

Как видите, я реализую сенсорное событие в элементе списка. Но это не срабатывает, когда я нажимаю на карту на симуляторе. Зачем? Как я могу это исправить?

Answer 1

Вы должны обернуть свой контент в компонент следующим образом:

<TouchableWithoutFeedback>
 <View>
  <Your components...>
 </View>
</TouchableWithoutFeedback>

Answer 2

TouchableWithoutFeedback всегда нужно иметь ребенка Viewсоставная часть. Итак, компонент, составляющийView недостаточно.

Так что вместо

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <MyCustomComponent />
</TouchableWithoutFeedback>

использование:

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <View>
    <MyCustomComponent />
  </View>
</TouchableWithoutFeedback>

См. Проблему с github для получения дополнительной информации

Answer 3

Может использоваться с <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>

Answer 4

В более поздних версиях React Native вместо этого просто используйте Pressable:https://reactnative.dev/docs/pressable

Answer 5

Для тех, кто борется с этой проблемой в react-native 0.64 и обертывание только View не работает, попробуйте следующее:

        <TouchableWithoutFeedback onPress={onPress}>
    <View pointerEvents="none">
      <Text>Text</Text>
    </View>
  </TouchableWithoutFeedback>

Answer 6

В моем случае я случайно импортировал TouchableWithoutFeedback из react-native-web вместо react-native. После импорта из react-native все заработало как положено.

Answer 7

По каким-то неизвестным причинам мне не помогло даже завернуть детей внутрь. Что для меня исправило, так это замена на новый компонент, представленный в 2020 году.

Также обертывание ребенка одним или оборачивание всего другим или установкаpointerEvents="none"внутреннегоViewкак предлагают другие пользователи, это обходной путь.

Для меня новый компонент:Pressableкажется хорошим выбором для заменыTouchableWithoutFeedbackкомпонент, он также предлагает большую универсальность, если вам нужно.

Итак, используя Pressable, код в вопросе можно изменить следующим образом:

      <Pressable onPress={this.albumPressed.bind(this)}>
  <Card>
    <CardSection>
      <Text>{album.artist}</Text>
    </CardSection>
    <CardSection>
      <Text>{album.title}</Text>
    </CardSection>
  </Card>
</Pressable>

Answer 8

В моем случае внизу была тень, которая вызывала нестабильность. То, что я сделал, чтобы решить это, было довольно просто: zIndex: 65000

      <View style={{ zIndex: 65000 }}>
   <TouchableWithoutFeedback onPressIn={() =>  {}>
     <View>
     </View>
   </TouchableWithoutFeedback>
</View>