创建' Div'和' Span' React Native中的组件

时间:2017-08-18 16:57:18

标签: javascript html reactjs dom react-native

我在各种论坛中都看到过使用" View"在React Native中,相当于使用' div'在React。

虽然我理解View组件的推理(谁想支持所有' div'选项?)但似乎是一个可以处理大部分合理' div&#39的组件;和' span'可以制作属性,以便将React移植到React本机并不是那么繁琐的工作。

是否有人拥有经过测试并可以共享的组件?关于样式支持,映射事件和映射子项的所有问题似乎都是重复的,因为几乎每个人都会跳进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>
  }
}

3 个答案:

答案 0 :(得分:5)

我认为你错过了React Native的观点。它旨在具有映射到移动平台的本机UI组件的组件。它并不意味着需要HTML并以某种方式将其转换为看起来像移动应用程序的东西。这就是为什么它被称为&#34; Native&#34; - 因为它实际上使用了平台上的UI。如果您想使用常见的HTML元素制作移动应用,那么为什么不坚持使用Cordova / Ionic等框架?

React现在就像一个成语,它允许您构建用户界面,无论设备如何。 React Native只接受React&#34; idiom&#34;并知道如何在移动屏幕上呈现它。所以没有&#34;将React移植到React Native。&#34;

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

答案 1 :(得分:2)

虽然我100%同意@nbkhope的答案,但我看到@LostInSpace所寻找的答案是替换HTML <div>

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

答案 2 :(得分:0)

@KrisRandall的解决方案只是包装成一个React组件,所以,@ nbkhope回答了这个问题。