我已经阅读了论坛，但我的问题没有运气。我打开了一个新闻源屏幕，如下所示： 1. 屏幕通过单击启动新闻组件 2. 组件仅获取数据，然后将其传递给另一个同级组件(以显示 flatList 项 3.从onPress事件中，项目应调用并显示组件以获取所单击项目的详细信息。
问题是步骤3不起作用。 我看到单击时突出显示的项目，并且 _onPress() 中的诊断警报确实有效。在调试中，我更改了 onPress 事件以直接使用 ...导航('新闻细节)但仍然没有运气。 但是当我将"新闻细节"替换为"主页"(主屏幕)时，就会显示屏幕。我尝试了其他组件("新闻")等，除了组件之外没有任何效果。我的代码片段和屏幕截图如下所示。 请帮忙，因为我已经走到了智慧的尽头。 谢谢。
import Newsdata from "../newsdata"; // import disabled for now until newsData component integration works
class News extends Component {
constructor(props) {
super(props);
this.state = {
news: [],
};
}
getNews() {
const link = 'https://feeds.feedburner.com/morganstateu';
const parseString = require('react-native-xml2js').parseString; // convert xml data fetched to json object
let resJson = [];
return fetch(link)
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
resJson = result; // local var result saved to a global var resJson for later use
});
this.setState({news: resJson.rss.channel[0].item});
}).catch((err) => {
console.log('fetch', err)
});
}
componentDidMount() {
this.getNews();
}
render() {
return(
<Newsdata news = {this.state.news} navigation={this.props.navigation} />
);
}
}
export default News;
class Newsdata extends Component {
constructor(props) {
super(props);
this.state = {
newsItem: ''
};
}
_onPress = (clickedItem) => {
// this.setState({newsItem: clickedItem});
// alert(clickedItem.description);
return <NewsDetail newsItem={clickedItem} navigation={this.props.navigation}/>
};
render() {
// console.log(this.state);
const { navigate } = this.props.navigation;
const textColor = this.props.selected ? "red" : "black";
return (
<Container style={styles.container}>
<Content>
<Header searchBar rounded style={styles.headerTitleStyle} iosBarStyle='light-content'>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="angle-left" style={styles.headerIconStyle}/>
</Button>
</Left>
<Body>
<Item >
<Icon name="search" style={{color: '#fff', fontSize: 25}}/>
<Input placeholder="Type Here..."
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent' />
</Item>
</Body>
<Right>
<Button transparent>
<Text>Search</Text>
</Button>
</Right>
</Header>
<View style={styles.horizontalLine} />
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.props.news}
extraData={this.state}
renderItem={({ item }) => (
<ListItem>
<Thumbnail source={{uri: GetImage(item.description)}} />
<Body style={styles.myListStyle}>
<TouchableOpacity onPress={() => this._onPress(item)} >
<Text style={{fontSize: 15}}> {item.title} </Text>
</TouchableOpacity>
<Text note >Posted: {<TimeAgo time={item.pubDate.toString() } />} </Text>
</Body>
<Right>
<TouchableOpacity onPress={() => navigate('NewsDetail')} >
<Button transparent>
<Icon active name='angle-right' style={{fontSize: 30}} />
</Button>
</TouchableOpacity>
</Right>
</ListItem>
)}
keyExtractor={item => item.title}
// onPressItem={this._onPress}
// refreshing={this.state.refreshing}
// onRefresh={this.handleRefresh}
/>
</List>
</Content>
</Container>
);
}
}
导出默认新闻数据; 截图： 在此处输入图像描述 在此处输入图像描述
12月18日更新：
我已经按照建议做了。我的 _onPress() 处理程序现在返回正确的应用状态，在应用启动时 showDetails 为空，并在项目单击时设置为 {item}。 但是下面的代码段中的逻辑没有发生屏幕导航。我做错了什么，使屏幕在项目单击时导航到详细信息屏幕(新闻详细信息)？ 感谢您的帮助，因为我被困在中立(微笑)。
<View style={styles.horizontalLine} />
{this.showDetails
? <NewsDetail showDetails={this.state.showDetails} navigation={this.props.navigation} />
: <FlatList
data={this.props.news}
extraData={this.state}
renderItem={({item}) => (
<ListItem>
<Thumbnail source={{uri: GetImage(item.description)}}/>
<Body style={styles.myListStyle}>
<TouchableOpacity onPress={() => this._onPress(item)}>
<Text style={{fontSize: 15}}> {item.title} </Text>
</TouchableOpacity>
<Text note>Posted: {<TimeAgo time={item.pubDate.toString()}/>} </Text>
</Body>
<Right>
<TouchableOpacity onPress={() => this._onPress(item)} >
<Button transparent>
<Icon active name='angle-right' style={{fontSize: 30}}/>
</Button>
</TouchableOpacity>
</Right>
</ListItem>
)}
keyExtractor={item => item.title}
// onPressItem={this._onPress}
// refreshing={this.state.refreshing}
// onRefresh={this.handleRefresh}
/>}
您的_onPress处理程序实际上不是一个操作，而是一个呈现函数。这实际上没有任何作用。
您可以做的是将单击的项目存储在您的状态中，然后根据该状态可以呈现详细信息屏幕。像这样：
_onPress = item => {
this.setState({showDetails: item})
}
closeDetails = () => {
this.setState({showDetails: null})
}
render () {
return (
<Container>
{this.showDetails
? <NewsDetail newsItem={this.state.showDetails} />
: {/* ... render List */}}
</Container>
)
}
重要的是，您的操作处理程序不会作为渲染函数调用。因此，返回 JSX 不会导致它在任何地方呈现。相反，您需要以可以在呈现函数中正确处理新应用状态的方式处理_onPress中的操作。
希望这有意义:D