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次点击，两次点击等，它只在我用两根手指敲击时才能工作。没有找到有关此问题的任何信息。可能有人知道如何解决这个问题？

由于

添加了FullCode：

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

正如我们所说，我会在这里发布，所以最好阅读和复制代码。

试试这个：

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仅在使用两根手指点按时才有效

1 个答案: