(一)前言
现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等)，今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。
刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)View组件介绍
View作为创建UI时候的最基础，最常用的组件。这边的View组件是支持FlexBox布局(对于FlexBox布局的详细使用讲解，请点击)，CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边，并且可以包含很多种类型的子视图。在Web,Android，iOS 三种平台上面该View视图可以对应平台中的三种原生视图，其中iOS对应UIView
，Web端对应<div>标签，Android对应android.view。下面我们来看一个比较简单的实例:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
'use strict'
;
var
React = require(
'react-native'
);
{
AppRegistry,
View,
} = React;
TestText = React.createClass({
render:
function
() {
return
(
<View style={{flexDirection:
'row'
,padding:20,height:100}}>
<View style={{backgroundColor:
'red'
</View>
);
}
});
AppRegistry.registerComponent(
'TestText'
上述例子,我们这般首先创建了一个View，该View高度为100 ，但是该View的padding为20，所以整体效果如下:
|
StyleSheet,
} = React;
TestText = React.createClass({
() {
(
<View style={styles.first_view}>
<View style={styles.second_view}>
</View>
</View>
);
}
});
styles = StyleSheet.create({
first_view:{
flexDirection:
padding:20
},
second_view: {
backgroundColor:
以上的代码我们发现使用StyleSheet，进行创建相关styles，然后赋值给style对象，在控件中直接styles对象进行使用即可。还是比较OK的。
猜你在找的React相关文章 |
