反应本机导航并导航到另一个屏幕问题

Question

我在主屏幕中有一个组件 最新添加.js.js当按下它时，我想导航到另一个名为 ProductDetailScreen 的屏幕.js但是当主屏幕.js渲染时我遇到了问题，它直接导航到产品详细信息屏幕.js如果我按后退按钮并导航到主屏幕.js然后按最新添加.js组件它显示错误 true 不是函数(评估 this.props.viewdetail(((

最后添加.js

<TouchableWithoutFeedback onPress={() => {
this.props.viewdetail();
}}>
<View style={{
flex: 1,
flexDirection: 'row',
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da', width: 180, padding: 5, marginRight: 5, height: 120
}}>
<View style={{}}>
<Text style={{ fontSize: 15, marginTop: 20 }}> {this.props.title}</Text>
<Text style={{ fontSize: 15, fontWeight: '700', marginTop: 10, marginBottom:10 }}> {this.props.author}</Text>
<StarRating
disabled={false}
maxStars={5}
starSize= {10}
rating={3}
fullStarColor= '#EDC430'
selectedStar={(rating) => this.onStarRatingPress(rating)}
/>

</View>
<Image style={{ width: 80, height: 100, margin: 2 }} source={{ uri: this.props.image }} />
</View>
</TouchableWithoutFeedback>

在主屏幕中渲染梅森.js

renderItem = ({ item }) => {
return (
<LatestAdded title={item.pro_name} author={item.pro_price} image={item.img_path}
viewdetail = { this.props.navigation.navigate('ProductDetail',{pro:item.pro_id})} />
)}

产品详情屏幕.js

class ProductDetailScreen extends Component {
render() {
const { navigation } = this.props;
const itemId = navigation.getParam('pro', 'none');
return (
<View style={styles.container}>
<Text>{itemId}</Text>
</View>
);
}

}

Answer 1

你的问题在这里：

viewdetail = { this.props.navigation.navigate('ProductDetail',{pro:item.pro_id})}

您希望传递稍后调用的函数，但要立即调用该函数

试试这个：

viewdetail = { () => {this.props.navigation.navigate('ProductDetail',{pro:item.pro_id})}}