在哪里实现重复逻辑，例如在 RN 中共享图像

Question

用户可以在我的应用中共享图像。这可以通过长按列表项或使用详细信息屏幕中的按钮来完成，该按钮在单击列表项后出现。

对于行（列表项），我有自己的容器和详细信息屏幕。

我应该将共享逻辑放在哪里？共享可以替换为我在应用程序中在不同位置使用的任何其他操作，而不会影响 redux 存储。

• 在谷歌地图或苹果地图中打开地址
• 拨打电话号码
• 将图像保存到设备存储
• 。

目前我看到三个选项：

操作、中间件、帮助程序类？

但是最好的方法是什么？

Answer 1

我现在正在做的是，我有一个扩展普通 React Native 组件的 BaseComponent，然后我让所有其他组件扩展我的 BaseComponent 而不是常规的 RN 组件。

这样我就可以共享我通常使用的功能，例如获取组合样式，对链接、弹出窗口等操作做出反应。

如果你有很多属于特定类别的代码/函数，那么是的，我制作了另一个帮助程序，并且 BaseComponent 包含对该帮助程序的引用。

所以，当我需要它时，我知道我可以调用这样的东西.getHelper（），任何组件都可以访问该帮助程序或函数。

Answer 2

您应该将它们放在高阶组件 （HOC） 中，并使用它来装饰具有这些功能的组件。

@shareable
class ImageItem extend React.Component {
  render() {
    const {handleShare} = this.props // injected by @shareable
    const {imgSrc} = this.props
    return(
      <div>
        <img src={imgSrc}/>
        <button onClick={handleShare}>Share</button>
      </div>
    )
  }
}

这种反应模式非常适合为组件创建可重用的数据/行为模型。