Реагируйте на встроенную навигацию и переход к другой проблеме с экраном

Question

У меня есть компонент LatestAdded.js в HomeScreen.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>
    );
}

}

Answer 1

Ваша проблема здесь:

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

Вы хотите передать функцию, которая будет вызвана позже, но вместо этого вы вызываете функцию сразу же

Попробуйте вместо этого:

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