在 React Native 中创建“Div”和“Span”组件

Posted 2023-02-22

【中文标题】在 React Native 中创建“Div”和“Span”组件

【英文标题】：Creating 'Div' and 'Span' Components in React Native

【发布时间】：2018-01-27 10:20:05

【问题描述】：

我在各种论坛上看到声称在 React Native 中使用“View”相当于在 React 中使用“div”。

虽然我理解 View 组件的原因（谁想要支持所有 'div' 选项？），但似乎可以制作一个可以处理大多数合理的 'div' 和 'span' 属性的组件将 React 移植到 React Native 并不是一件繁琐的工作。

有没有人有这样的组件，他们已经测试过并且可以分享？对于几乎所有进入 React Native 的人来说，关于样式支持、映射事件和映射子对象的所有问题似乎都是重复的。

类似

class Div extends Component   //or Class Span extends Component

  static propTypes = 
    style : PropTypes.obj
    onClick : PropTypes.func   // ...
  

  render ()
    return (
      <View>
      
        /* whatever is needed to pass everything through  ... */
      
      </View>
  

【参考方案1】：

我认为你错过了 React Native 的重点。它意味着具有映射到移动平台的本机 UI 组件的组件。它并不意味着采用 html 并以某种方式将其转换为看起来像移动应用程序的东西。这就是为什么它被称为“Native”——因为它实际上使用了来自平台的 UI。如果您想使用常见的 HTML 元素来制作移动应用程序，那么为什么不坚持使用 Cordova/Ionic 等框架呢？

React 现在就像一个习惯用法，允许您构建用户界面，无论使用何种设备。 React Native 只是采用了 React “惯用语”，并且知道如何在移动屏幕上呈现它。所以不存在“将 React 移植到 React Native”这样的事情。

如果您想进行实验，是的，您可以制作自定义 Div 组件和自定义 Span 组件——这取决于您。您可以将道具从该组件向下传递到视图或文本。但我认为那将是多余的。通常你会创建自己的组件，并在幕后使用 View、Text 和 TextInput 等——所有 React Native 的基本组件。

【讨论】：

或者有人可以帮我定义一个可以解决我的问题的组件。我对 react native 的哲学基础以及它为何如此精彩不感兴趣。我只想解决我的特定移植问题。如果移植后用户体验不正确，那么我有一个工作代码库要修改。

div 和 span 是最基本的 dom 元素。我要做的是弄清楚我需要从“视图”中添加/删除哪些默认值，以使它们的行为类似于这些通用容器或足够接近以提供改进的工作原型的东西。这不是特定于 dom 的请求，尽管它看起来是空容器默认值到新容器默认值请求的映射。

这不应该是一个答案，因为它不直接回答 OP 问题。如果您想分享您的意见，请发表评论。这里不适合发表没有任何有用答案的独立意见。

【参考方案2】：

虽然我 100% 同意 @nbkhope 的回答，但我看到 @LostInSpace 正在寻找的答案是替代 HTML <div>

这似乎是这样的事情：https://www.npmjs.com/package/react-native-div

【讨论】：

感谢您的参考。由于@nbkhope 喝了kool aid 答案，我直接放弃了react native。 React Native 是假冒（在版权方面）作为 React 兼容的东西的缩影。 React 是一个非常不错的平台，有一些非常好的想法（有些还需要一些改进）。