使用 TouchableWithoutFeedback 反應本機 onPress 不起作用

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 0.64 中遇到此問題並且僅將其包裝在 View 中不起作用的人，請嘗試以下操作：

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

Answer 5

就我而言，下面有陰影，導致不穩定。 我解決這個問題的方法很簡單：zIndex: 65000

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

Answer 6

在我的例子中，我不小心從 react-native-web 而不是 react-native 導入了 TouchableWithoutFeedback。從 react-native 導入后，一切都按預期工作。

Answer 7

在最近的 React Native 版本中，只需使用 Pressable 代替： https://reactnative.dev/docs/pressable