参考:
在第三节,我们创建的基于React.native的iOS项目中,
界面部分是一个js文件:index.ios.js
我们需要简单了解一下它的内容和各部分的作用,以便后续开发。
注意:
index.ios.js文件是一个js的源码文件,
我们可以用写字板、Xcdoe或Sublime等软件进行编辑并保存。
我是用 Sublime ,能实现部分代码自动补全和代码颜色标识,比较方便。
React.native 框架只是将
React
组件树转化成为原生的UI。
-----------------------------------------------
一、
视图 View
视图是在UI设计和显示时,最常用的、最基本的组件/控件。
视图是一个容器,表现为屏幕上的一块矩形区域,
用于显示需要输出的内容,可以包括文字、图片和视频;
视图支持触摸事件处理;
视图View支持各种布局、样式的设置。
视图 View可以嵌套显示,也就是一个视图中,可以包含多个子视图。
二、视图 View 的使用
显示视图,有三个步骤:
1.添加 React 的依赖项
在声明React变量中,添加视图 View 组件:
var {
AppRegistry,
StyleSheet,
View,
Text,
} = React;
说明:其中添加的是将要使用的React的依赖项。
这里添加了四个依赖项:
a. AppRegistry 是指定了app程序入口;
b. StyleSheet 是下面即将定义的UI的样式,就是界面的各种属性的设置;
c. View 就是即将用到的视图;
d. Text 就是即将用到的文本,用于输出字符串;
2.定义文本样式 StyleSheet
作用:定义了一段应用在UI上的样式。
说明:React Native没有实现CSS,而采用JavaScript 来定制应用程序的样式。
View支持 FlexBox 的布局、样式、触摸事件处理。
Flexbox布局目的是:提供一个更加有效的方式,制定、调整和分配一个容器和其子项目的布局,
即使它们的大小是未知或者是动态的。(所以,叫做 Flex 拉伸/伸缩)。
采用Flex布局,可以让容器改变其子视图的宽度、高度和排列的顺序,
以最佳方式填充可用空间,
这样便于实现屏幕适配,即适应于所有类型的显示设备和屏幕大小)。
Flex容器,会使子视图(伸缩视图)扩展,来填满可用空间,或缩小以防止溢出容器。
var styles = StyleSheet.create ({
viewStyle: { //定义 View 视图的样式
flex: 1,
backgroundColor: '#F5FCFF',
},
textStyle: { //定义 Text 的样式
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
a.样式 viewStyle
定义了用于视图View的样式。
样式名称,由程序员自己决定,保证可读性即可。
这里两个属性:
flex:
0: 默认值,不会填充满父视图区域;
1: 填充满父视图(父容器)
backgroundColor
:
指定背景色,即当前View的颜色。
可以用:‘#0000FF’、'#0000ff' 或 blue,表示蓝色。
b.样式 textStyle
定义了用于文本Text的样式。
这里设置了三个属性:
fontsize
:
字体属性,20个像素高度和宽度。
textAlign
: 文字对齐方式。
margin
: 边距,单位是像素。
3.
创建React组件对应的类
var HelloReact = React.createClass({ //创建组件类
render: function() { //渲染的方法: 设置UI
return (
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>
--Hello goodmao !
</Text>
</View>
);
}
});
作用:描述将要创建的组件,包括各种行为和属性。
分析:
a.创建组件HelloReact的方法createClass( )
ar HelloReact = React.createClass();
b.组件渲染的方法
render: function() {//渲染的方法
return ();
}
注意:
只有当组件被渲染时,必须实现render接口方法,
因为,只有render方法,是用于输出内容组件内容的;
其他接口方法,都是可选的。
c.标签<View>定义了视图
作用:设置显示区域,相当于iOS中的UIView控件(Objective-c和Swift)
<View style = {styles.viewStyle}> //视图 View
</View>
d.标签<Text>定义了文本
作用:设置要显示的文本,相当于iOS中的UILabel控件
(Objective-c和Swift)
<Text style = {styles.textStyle}>
--Hello goodmao !
</Text>