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

Question

我在HomeScreen.js中有一个组件HomeScreen.js，当它按下它时，我想导航到另一个名为ProductDetailScreen.js的屏幕，但是当HomeScreen.js呈现它直接导航到ProductDetailScreen.js时，我面临一个问题，如果我按后退按钮并导航到HomeScreen.js并按下LatestAdded.js组件，它会显示错误不是一个函数(计算this.props.viewdetail())

LastedAdded.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>

HomeScreen.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})} />
)}

ProductDetailScreen.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})}}