我想显示来自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
有谁知道如何解决这个问题以及我在这里做错了什么。 提前谢谢。
更新
我的更新课程:
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;
答案 0 :(得分:3)
您应该使用TouchableOpacity或任何其他可触摸项目包装CardItem。并将onPress功能赋予该Touchable项目。
<TouchableOpacity onPress={() => //your function}
<CardItem>
</CardItem>
</TouchableOpacity>
答案 1 :(得分:1)
您需要绑定此功能。在构造函数中编写以下代码:
this._OnButtonPress = this._OnButtonPress.bind(this);
另外,更改了onPress如下:
onPress={()=> this._OnButtonPress(news.title)}
最后,我可以看到onPress已写在组件上。相反,您应该在该容器内定义/写入它。
答案 2 :(得分:1)
您遇到的问题是该方法无法访问视图的范围。现在,您可以通过以下方式定义renderNews方法:
renderNews(news) { }
如果以这种方式声明方法,则不会在方法中使用此方法,并且由于“this”未定义,所有方法都会触发错误,因为您尝试访问“undefined.methodName()”。话虽如此,你应该将上下文“绑定”到你的方法声明:
renderNews = (news) => { }
现在您已将上下文附加到方法中,并且“this”可在内部访问。
答案 3 :(得分:0)
对我来说,我离开按钮= {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>