react-native - 这两个 View 组件有什么区别?
问题描述
我正在查看 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 组件不会。
解决方案
至于父<View>
组件,您不能使用自关闭,因为它必须在开始标签和结束标签之间包装子组件。
如果是孩子<View>
,您不会在标签中包装任何孩子,因此您可以使用 open 并选择使用自闭合或单独的闭合标签。这是JSX功能,同样适用于所有标签,例如<div>
,<p>
或其他自定义元素。
你可以更深入地了解它JSX in Depth
推荐阅读
- css - 在 WebStorm 的单行注释块内添加空格
- java - 如何使用spring boot 2.x为redis集群设置密码
- c# - 使用 C# 和 AngularJS 在 azure db 中插入时间和日期时间
- javascript - 如何在我的反应应用程序的 json 段落中提取特定句子?
- php - WordPress 速度
- node.js - NodeJS 请求库如何获取完整的 URL,包括 URI 和查询字符串参数
- ios - 返回 Ionic 2 中的上一个应用程序
- delphi - 为什么我只在 HTTPS (SSL) 站点上使用 Indy 获得“对等连接重置”?
- javascript - 以 1969 为到期日期的 cookie 是什么意思?
- java - 无法使用类型编号的 where 条件从数据库中检索行