React Native组件
React Native是用React Native框架来组建Android和IOS App的技术,那么React Native组件就是React组件。React组件让你将UI分割成独立的、可重用的一些碎片或部分,这些部分都是相互独立的。
创建组件的三种方式
1.ES6创建组件的方式
export default class HelloComponent extends Component {
render() {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello, {this.props.name}</Text>
}
}
2.ES5创建组件的方式
var HelloComponent = React.createClass({
render () {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
}
})
//导出
module.exports = HelloComponent;
3.函数式定义的无状态组件
/**
* 方式三:函数式
* 无状态,不能使用this
*/
function HelloComponent(props) {
return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello, {props.name}</Text>
}
module.exports = HelloComponent
组件的生命周期
如图,可以把组件的生命分为三个阶段
第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作
第一阶段(除render方法外)和第三阶段,所有的方法都是一次性调用(只会调用一次),第二阶段里面的所有方法会多次被调用。
导入与导出
导出组件
ES6:export defalut
ES5: module.exports = 组件名
导入组件
import
上面创建组建的时候有提到过,可以参考。
导出变量和常量
/**
*导出一个变量
*/
export var name = '小明'
var age = '22'
/**
*导出常量
*/
const sex = '男'
/**
* 批量导出
*/
export {name, age}
导入变量
import 组件名,{导入的变量或者方法名} from ...
import ImportExportComponent, {name, age} from './importExportComponent'
导出方法
export function sum(a, b)
导入方法
import ImportExportComponent, {name, age, sum} from './importExportComponent'
React Native的props使用详解
props是父组件传递给子组件,或者是本组件定义的默认默认属性。props是只读的,无法修改。
定义默认属性
static defaultProps = {
name:'Jackie'
}
属性检查机制
static propTypes = {
name:PropTypes.string, //name必须为string类型
age:PropTypes.number, //age必须为数字类型
sex:PropTypes.string.isRequired, //性别必须传递
}
查看源码,属性检查机制支持的类型如下:
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker
};
延展操作符和结构赋值
export default class setup extends Component {
render() {
var params = {name:'小张', age:18, sex:'男'};
//取出部分属性
var {name, sex} = params;
return (
<View style={styles.container}>
<HelloComponent
//name="Jackie"
//ES6延展操作符
{...params}
//ES6结构赋值,可以从一组属性中获取指定属性
name={name}
sex={sex}
/>
<Text style={{fontSize:20}}>名字:{name}</Text>
<Text style={{fontSize:20}}>年龄:{age}</Text>
</View>
);
}
state
因为上面提到的props是只读的,无法改变,为了实现交互,我们用到了state。我们可以把组件看成一个状态机,UI看成各种状态,并在各种状态之间进行切换,只需要改变state,React Native就会重新渲染UI。
ref
ref可以看作是组件渲染后指向组件的一个引用,通过ref可以获取真实的组件。
类
对熟悉Java,object-c,C#等纯面向对象的开发者来说,都会对class有一种特殊的情怀,ES6中引入了class(类),让JavaScript的面向对象编程变得更加简单和容易理解。
Student.js
/**
* Created by jie.cheng on 2017/3/7.
*/
export default class Student {
constructor(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
toString() {
return "姓名:" + this.name + " 年龄:" + this.age + " 性别:" + this.sex;
}
}
使用:
export default class setup extends Component {
constructor(props) {
super(props)
this.student = new Student("小刚", 16, "男");
}
render() {
return (
<View style={styles.container}>
<Text style={{fontSize:20}}>{this.student.toString()}</Text>
</View>
);
}
}
React Native布局知识
React Native中的布局方式FlexBox。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题,因为既然React Native选择用FlexBox布局,那么React Native对FlexBox的支持自然会做的很好。
宽和高
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸,也就是大小。
像素无关
在React Native中尺寸是没有单位的,它代表了设备独立像素。
<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
<Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>
上述代码,运行在Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。
React Native按钮
在做App开发过程中离不了的需要用户交互,说到交互,我们首先会想到的就是按钮了,在React Native中没有专门的按钮组件。 为了能让视图能够响应用的的点击事件,我们需要借助Touchablexxx组件,来包裹我们的视图。为什么说是Touchablexxx呢,因为它不只是一个组件,而是一组组件,一下四个组件都可以用来包裹视图来响应用户的点击事件。
TouchableWithoutFeedback:响应用户的点击事件,如果你想在处理点击事件的同时不显示任何视觉反馈,使用它是个不错的选择。
TouchableHighlight:在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
TouchableOpacity:相比TouchableHighlight在按下去会使背景变暗的效果,TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。
TouchableNativeFeedback:在Android上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似水波纹的视觉效果。注意,此组件只支持Android。
React Native图片加载技巧
使用本地静态图片
可以不指定大小,默认是图片的大小
render() {
return <View>
<image
source={require('./qiqiu.png')}
/>
</View>
}
也可以指定大小
render() {
return <View>
<image
style={{width:500,height:100,borderWidth:1}}
source={require('./qiqiu.png')}
/>
</View>
}
使用网络图片
render() {
return <View>
<image
style={{width:500,height:100,borderWidth:1}}
source={{uri:'图片地址'}}
/>
</View>
}
注意,加载网络图片时,一定要指定图片的宽和高,不然,网络图片无法渲染。
使用原生图片资源
render() {
return <View>
<image
style={{width:500,height:100,tintColor:'red'}}
source={{uri:'图片的名称'}}
/>
</View>
}
注意
①tintColor表示给图片着色,加载本地资源图片,也一定要指定图片的宽和高
②对于Android来说,只能加载drawable目录下的图片,mipmap下面的图片无法加载
③由于用到了项目中的图片,所以必须重新安装应用,不能直接刷新