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

Question

我正在做一个带有 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)
}

Answer 1

你能试试这个吗？

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

Answer 2

this.props.navigation.push('ProductDetails', {product: { item } }) 尝试使用 push 再次重新渲染组件， .navigate 所做的是它检查导航堆栈，如果它在那里，那么它不会再次渲染。但是 push 总是重新渲染组件。所以试试吧。

Answer 3

这个问题将由 React Native Event Listeners (react-native-event-listeners) 解决。 添加 EventRegister

//in Products List page

import { EventRegister } from 'react-native-event-listeners'

  componentWillMount() {
        this.listener = EventRegister.addEventListener('myCustomEvent', (item) => {
          console.log(item);
		// update quantity here
        })
    }
    
    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }


//in ProductDetails screen
  
 EventRegister.emit('myCustomEvent', item)

 

Answer 4

就像上面所说的那样：

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

但是他们忘了加上params的用法，所以在ProductDetails里面使用params：

this.props.navigation.state.params.product