反应本机卡（本机基础）onPress 不起作用

Question

我想显示包含来自 JSON 文件的新闻的卡片。获取 JSON 工作正常，但我想添加一个 onPress 事件，这样我就可以单击卡片并导航到文章。

我的名片浏览量：

<Card>
  <CardItem button onPress={this._OnButtonPress(news.id)}>
    <Left>
      <Body>
        <Text style={styles.cardText}>{news.title}</Text>
      </Body>
    </Left>
  </CardItem>
  <CardItem>
    <Left>
        <Icon style={styles.icon} name="chatbubbles" />
        <Text>{news.comments} comments</Text>
    </Left>
    <Right>
      <Text>{news.published}</Text>
    </Right>
  </CardItem>
</Card>

我正在尝试将变量传递给 onButtonPress() 函数

_OnButtonPress(newsID) {
  Alert.alert(newsID.toString());
}

为了测试 onPress 事件，我所做的只是提醒参数。

I don't see anything wrong, but still I got this error

有谁知道我该如何解决这个问题以及我在这里做错了什么。提前致谢。

更新

我的更新 class:

import React, { Component } from "react";
import {
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
  Alert
} from 'react-native';

import {
  Container,
  Header,
  Left,
  Right,
  Button,
  Card,
  CardItem,
  Icon,
  Body,
  Content,
  Logo
} from 'native-base';

import styles from "./styles";

const logo = require("../../../img/f1today.png");

var REQUEST_URL = 'http://v2.first-place.nl/test/news.json';

class News extends Component {
  constructor(props) {
    super(props);

    this._OnButtonPress = this._OnButtonPress.bind(this);

    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

  _OnButtonPress(newsID) {
    Alert.alert(newsID.toString());
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.articles),
          loaded: true,
        });
      })
      .done();
  }

  render() {

    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <Container style={styles.container}>
        <Header
          style={{ backgroundColor: "#fff" }}
          androidStatusBarColor="#f05423"
          iosBarStyle="light-content">

        <Left>
          <Button
            transparent
            onPress={() => this.props.navigation.navigate("DrawerOpen")}
          >
            <Icon name="ios-menu" style={{color: 'black'}} />
          </Button>
        </Left>
        <Body> 
          <Image source={logo} style={styles.headerLogo} />
        </Body>
        <Right />

      </Header>

      <Content padder>

        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderNews}
          style={styles.listView}
        />

      </Content>
    </Container>
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text>
          Loading news...
        </Text>
      </View>
    );
  }

  renderNews(news) {
    return (
      <Card>
        <CardItem button onPress={()=> this._OnButtonPress(news.id)}>
          <Left>
            <Body>
              <Text style={styles.cardText}>{news.title}</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem>
          <Left>
              <Icon style={styles.icon} name="chatbubbles" />
              <Text>{news.comments} comments</Text>
          </Left>
          <Right>
            <Text>{news.published}</Text>
          </Right>
        </CardItem>
      </Card>
    );
  }
}

export default News;

Answer 1

您需要绑定此功能。在构造函数中写入以下代码：

this._OnButtonPress = this._OnButtonPress.bind(this);

此外，将 onPress 更改如下：

onPress={()=> this._OnButtonPress(news.title)}

终于可以看到组件上写了onPress了。相反，你应该 define/write 它在那个容器里。

Answer 2

您应该使用 TouchableOpacity 或任何其他可触摸项目包裹您的 CardItem。并为该 Touchable 项目提供 onPress 功能。

<TouchableOpacity onPress={() => //your function}
    <CardItem>
    </CardItem>
</TouchableOpacity>

注意：确保您使用与 react-native 包关联的 <TouchableOpacity> 组件而不是 react-native-gesture-handler 包。 Visual Studio 代码编辑器可以从 react-native-gesture-handler 自动导入，这在这个特定用例中不起作用。

正确的包裹：

import { TouchableOpacity } from 'react-native';

不正确的包裹：

import { TouchableOpacity } from 'react-native-gesture-handler';

Answer 3

您遇到的问题是该方法无法访问视图的范围。现在你的 renderNews 方法是这样定义的：

renderNews(news) { }

如果您以这种方式声明您的方法，您将无法在您的方法中使用此方法，并且由于 "this" 未定义，所有方法都将触发错误，因为您正在尝试访问 "undefined.methodName()" .话虽如此，您应该 "tie" 以这种方式声明方法的上下文：

renderNews = (news) => { }

现在您已将上下文附加到该方法，并且 "this" 可以在内部访问。

Answer 4

对我来说，当我添加它时，我离开了 button={true} 道具。请参阅下面的示例。

  <CardItem 
       button={true}
       onPress={() => {this.cardSelected(item.name)}}
       style={{paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0}}>
      <Image  source={item.img} style={{flex:1,resizeMode: 'cover',height: 175}} />
      <Text style={styles.cardheading}>{item.name}</Text>
        <Image source={cardline} style={styles.cardline}/>
        <Text style={styles.cardtext}> {item.text}</Text>

      </CardItem>

反应本机卡（本机基础）onPress 不起作用

React native card (native base) onPress doesn't work

javascript

react-native

native-base