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，因此我可以与父屏幕进行通信以显示模态，错误警报等。帮助程序是我只有合并两个对象的模块。

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

到目前为止，它一直很好用。希望它有所帮助

将passProps发送到React-Native-Navigation

1 个答案: