反应本机。 TouchableOpacity 仅在用 2 根手指点击时有效

Question

我运行我的应用程序是通过 React-Native 和 native-base 开发的，但组件 TouchableOpacity 出现了一些问题。

当我像

一样编写我的组件时

<TouchableOpacity onPress={() => {this.onPress()}}>
    <Text>Some text</Text>
</TouchableOpacity

当我用 1 根手指点击时，效果非常好

但是当我运行像这样时 - 我的代码：

renderList () {
    return (
        <List>
            {this.state.data.map( ( restaurant, index ) => {
                return (
                    <TouchableOpacity onPress={() => {
                        this.onPress();
                    }} key={index}>
                        <View style={styles.example}>
                            <ListItem>
                                <Thumbnail square size={80} source={{ uri: 'Image URL' }}/>
                                <Body>
                                <Text>{restaurant.title}</Text>
                                <Text note>{restaurant.shortDescription}</Text>
                                </Body>
                            </ListItem>
                        </View>
                    </TouchableOpacity>
                );
            } )}
        </List>

    );
}

它忽略了点击 1 次、点击两次等，只有当我用 2 根手指点击时它才有效。没有找到有关此问题的任何信息。可能有人知道如何解决这个问题？

谢谢

已添加完整代码：

import React, { Component } from 'react';
import {
    Container,
    Button,
    Header,
    Left,
    Icon,
    Body,
    Right,
    Text,
    Content,
    List,
    ListItem,
    Thumbnail
} from 'native-base';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

export default class Restaurants extends Component {

constructor ( props ) {
    super( props );
    this.state = {
        data: this.props.data
    };
}

onPress () {
    console.log( 'Hello' );
}

renderList () {
    return (
        <List>
            {this.state.data.map( ( restaurant, index ) => {
                return (
                    <TouchableOpacity onPress={() => {
                        this.onPress();
                    }} key={index}>
                        <View style={styles.example}>
                            <ListItem>
                                <Thumbnail square size={80} source={{ uri: 'Image URL' }}/>
                                <Body>
                                <Text>{restaurant.title}</Text>
                                <Text note>{restaurant.shortDescription}</Text>
                                </Body>
                            </ListItem>
                        </View>
                    </TouchableOpacity>
                );
            } )}
        </List>

    );
}

render () {
    return (
        <Container>
            <Header style={styles.header}>
                <Left>
                    <Button transparent>
                        <Icon style={styles.header_icon} name="arrow-back"/>
                    </Button>
                </Left>
                <Body>
                <Text>Ресторанны</Text>
                </Body>
                <Right>
                    <Button transparent>
                        <Icon style={styles.header_icon}     name="restaurant"/>
                    </Button>
                </Right>
            </Header>
            <Content>
                {this.renderList()}
            </Content>
        </Container>
    );
}
}

const styles = StyleSheet.create( {
header: {
    backgroundColor: '#606dff'
},
header_icon: {
    color: 'black'
},
example: {
    backgroundColor: 'red'
}
} );

Answer 1

正如我们所说，我会 post 在这里阅读和复制代码会更好。

试试这个：

renderList() {
  return (
    <List>
      {
        this.state.data.map( ( restaurant, index ) => {
          return (
            <ListItem>
              <TouchableOpacity
                onPress={() => {
                  this.onPress();
                }}
                key={index}
              >
                <View style={styles.example}>
                  <Thumbnail square size={80} source={{ uri: 'Image URL' }}/>
                  <Body>
                    <Text>{restaurant.title}</Text>
                    <Text note>{restaurant.shortDescription}</Text>
                  </Body>
                </View>
                </TouchableOpacity>
            </ListItem>
          );
        });
      }
    </List>
  );
}

我交换了 <ListItem> 和 <TouchableOpacity> 你写的方式可能有任何冲突。

让我知道它是否有效。

反应本机。 TouchableOpacity 仅在用 2 根手指点击时有效

React-Native. TouchableOpacity works only when tap with 2 fingers

ios

react-native

native-base