将passProps发送到React-Native-Navigation中的特定组件

Question

我目前使用的是react-native-navigation (Wix)和RN 0.48.3，没有flux或redux。

目前我专注于让后端处理几乎所有的逻辑，所以我发送移动组件执行的“动作”。其中之一是打开一个内部链接，我可以从后端添加一些passProps。

现在，新的屏幕可能有多个组件，而我只是将一堆属性发送到一个屏幕。

我的问题是，向特定组件发送特定道具的最佳方式是什么？我目前正在考虑发送一个带有ID的JSON结构，我可以在最后一个屏幕中匹配到一个ref。

我乐于接受各种想法。我没有使用redux或flux，我想保持这种方式，但如果这能让事情变得更简单，我愿意把它添加到项目中。

Answer 1

如果有人有更好的选择，请让我知道，但我已经这样解决了。

我有一个ScreenComponent，它实际上丰富并增加了我所有的子组件的功能，比如分析和其他一些助手。

基本上，我为每个屏幕上添加的每个组件添加了一个引用，然后像这样使用passProps：

screenParams: {
                      screen: 'AudioScreen',
                      passProps: {
                          componentProps: {
                              audioCard: {
                                  title:'Audio Title',
                                  subtitle:'Audio Subtitle',
                                  image:{imageSource},
                                  audioSource:{audioSource}                                                        
                              }   
                          }
                      }
                  }

componentProps是我使用的对象，在我的屏幕上，我在我的componentWillMount中执行以下操作：

this._children = React.Children.map(this.props.children, child => {
            let extraProps = {
                eventEmitter: this._eventEmitter
            };
            if (child.ref != null && self.props.componentProps && self.props.componentProps[child.ref]){
                extraProps = self.getHelper().concat(extraProps, self.props.componentProps[child.ref])
            }
            return React.cloneElement(child, extraProps);
        });

正如您所看到的，我正在为每个子对象添加一个eventEmitter，这样我就可以与我的父屏幕通信，以显示模态、错误警报等。helper是我拥有的一个模块，它只是合并了两个对象。

这样，我可以向屏幕发送道具，向每个组件发送道具，也可以覆盖后端的所有内容。

到目前为止，它一直运行得很好。希望能有所帮助