这两个 View 组件有什么区别？

Question

我正在查看 react-360 和 react-native 代码，发现以下有关 View 组件的示例。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

为什么子视图组件会自动关闭而父视图组件不会。

Answer 1

因为父View组件有子组件，而子View组件没有。请参阅此相关的 Stack Overflow 问题：()

Answer 2

至于父级 <View> 您不能使用自闭合，因为它必须在开始和结束标记之间包裹子组件。

如果是子 <View> 你没有在标签中包装任何子，所以你使用 open 并选择使用自关闭或单独关闭标签。这是 JSX 特性，同样适用于所有标签，例如 <div>、<p> 或其他自定义元素。

你可以更深入地了解它JSX in Depth

这两个 View 组件有什么区别？

What is the difference between these two View components?

react-native

react-360