React native TouchableHighlight 忽略第一项

Question

我在 React native 中使用了 TouchableHighlight 作为 FlatList。这里用于显示将由 API 返回的城市。但是当平面列表中的每个项目都被触摸时，只有第一个项目被忽略。但是当我按下时，除了第一个项目之外的其他项目会突出显示。另外，我在我的设备上运行该应用程序，而不是在模拟器中。 The screenshot of the flatlist

代码

export default class SearchResultsList extends Component {

render() {

    return (
        (this.props.list &&
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }} keyboardShouldPersistTaps={'always'}>
                <FlatList
                    data={this.props.list}
                    renderItem={({ item }) => (
                        <TouchableHighlight
                            onPress={() => {
                                console.log(item.primaryText);
                            }}
                            underlayColor="#cca016"
                        >
                            <ListItem
                                title={item.primaryText}
                                subtitle={item.secondaryText}
                                containerStyle={{ borderBottomWidth: 0 }}
                            />
                        </TouchableHighlight>
                    )}
                />
            </List>)
    );
}}

当我在没有 keyboardShouldPersistTaps={'always'} 的情况下进行检查时，也会出现同样的问题。

Answer 1

您似乎正在使用react-native-elements List 组件。

如果是这种情况，您不应该在react-native-elements List 内放置FlatList。

希望对你有帮助