react-native - 这两个 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>
    );
  }
}

为什么子 View 组件会自动关闭，而父 View 组件不会。

Answer 1

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

如果是孩子<View>，您不会在标签中包装任何孩子，因此您可以使用 open 并选择使用自闭合或单独的闭合标签。这是JSX功能，同样适用于所有标签，例如<div>,<p>或其他自定义元素。

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

Answer 2

因为父 View 组件有子组件，而子 View 组件没有。请参阅这个相关的 Stack Overflow 问题：（React 组件结束标记）