将 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，因此我可以与我的父屏幕进行通信以显示模式、错误警报等。助手是我拥有的一个模块，它只是合并两个对象。

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

到目前为止，它一直运行良好。 希望对你有帮助