时间戳

首页 > 解决方案 > 使用 react-navigation 的 navigate('routeName') 传递的参数不是响应式的

react-native - 使用 react-navigation 的 navigate('routeName') 传递的参数不是响应式的

问题描述

我正在做一个带有 react-native 的电子商务应用程序。在产品屏幕上，我使用 FlatList 显示存储在 MobX 可观察数组中的所有产品，当您点击产品时，我将该产品（对象）作为参数传递给 react-navigation 的导航到另一个屏幕（ProductDetails），在那里人们可以添加/减少数量，最后可以将该项目添加到购物车。但是，在 ProductsDetails 屏幕中，数量不是反应性的。

数量确实在商店中得到了更新，当我返回并再次进入 ProductDetails 屏幕时，我看到了这一点。

我试过四处查看不同的文章，但找不到适合我的东西。任何帮助，将不胜感激。

//in Products List page

onPress = (item) => { // onPress of a FlatList item
 this.props.navigation.navigate('ProductDetails', {
            product: item
  })
}

//in ProductDetails screen

export default class ProductDetails extends Component {

    product = this.props.navigation.getParam('product')

    addQty = () => {
         this.product.qty = this.product.qty + 1;
    }

... (other code)
}

标签： react-nativemobxreact-native-navigation

解决方案

就像上面另一个说的：

this.props.navigation.navigate('ProductDetails', {product: { item } })

但是他们忘记添加参数的用法，所以要在里面使用参数ProductDetails：

this.props.navigation.state.params.product

推荐阅读