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

Question

我在 HomeScreen.js 中有一个组件 LatestAdded.js，当按下它时，我想导航到另一个名为 ProductDetailScreen.js 的屏幕，但是当 HomeScreen.js 渲染它直接导航到 ProductDetailScreen.js 时，我遇到了一个问题，如果我按下后退按钮并导航到 HomeScreen.js 并按下 LatestAdded.js 组件它显示错误 true 不是函数（评估 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>
    );
}

}

标签： javascriptreactjsreact-nativereact-native-navigation

Answer 1

你的问题在这里：

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

您想传递一个稍后调用的函数，但您立即调用该函数

试试这个：

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