一、初识React Native的组件
什么是React Native的组件?
React组件让你将UI分割成独立的、可重用的一些碎片或者部分,这些部分都是相互独立的
创建组件的三种方式
ES6创建组件的方式
ES5创建组件的方式
函数式定义的无状态组件
这里我们主要还是学习下ES6的相关知识点
二、项目的运行及编写
首先我们在命令行中新建了一个ReactNative项目,不清楚请看ReactNative开发(一),我这里考虑到框架的原因,选择的WebStorm开发工具,集成框架的话,这个工具还是比较实用,我们来看看目录结构
说实话,第一眼觉得这跟Androidstudio的目录结构简直如出一辙,为了同时在Android和ios中同步效果,这里新建一个js文件,这里取名为setup,将android.js的文件内容复制过来,并且按如下编写:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Hello from "./Hello";
export default class setup extends Component {
render() {
return (
<View style={styles.container}>
<Hello/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:50,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
这里修改类名为setup,Component 为组件, render()是渲染界面的必须的方法,不可缺少,并且删除了AppRegistry引用,然后把Android和ios的js文件修改引用这个setup.js文件,如下:
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import setup from "./setup";
AppRegistry.registerComponent('AwesomeProject', () => setup);
再次运行项目,打开Terminal命令行,运行没错的话就修改成功,我们来新建一个js文件显示内容,这里取名为hello.js文件,内容如下:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
export default class Hello extends Component{
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>我的第一个react native程序</Text>
}
}
运行项目,即可看到Text内容的显示了
三、React Native组件生命周期
组件的生命周期分成三个状态,这里就不细说每个生命周期了,如下
Mouting---已经插入真是DOM
Updating---正在被重新渲染
Unmouting---已经一处真实DOM
四、导入和导出
这里我们来看下三个导入和导出
类的导入和导出
变量常量的导入和导出
方法的导入导出
类的导入和导出
//导出
export default class setup extends Component
//导入
import Hello from "./Hello";
变量常量的导入和导出
//这里变量常量没有导出的写法,看怎么定义
var name='dddd';
var age='22';
//导入
import Hello, {name,age} from "./Hello";
方法的导入导出
//导出
export function sum(a,b) {
return a+b;
}
//导入
import Hello, {sum} from "./Hello";
//下面我们看看怎么引用
export default class setup extends Component {
constructor(props){
super(props);
this.state=({
result:''
})
}
render() {
return (
<View style={styles.container}>
<Hello/>
<Text style={{fontSize:20}}>名字:{name}</Text>
<Text style={{fontSize:20}}
onPress={()=>{
var result=sum(2,3);
this.setState({result:result,})
}}
>2+3={this.state.result}</Text>
</View>
);
}
}
四、props的使用
对于props的理解,我觉得是页面传递属性的作用,将属性和变量通过props传递给组件,组件在自己对应的类中可以获取属性值,但是这些属性值是不可改变的,举例如下:
//在主界面这里调用的Hello组件,传递age到组件中去
render() {
return (
<View style={styles.container}>
<Hello
age='22'
/>
</View>
);
}
//在Hello组件中调用age,如果没有传递,那么在defaultProps使用默认值
static defaultProps={
name:'小明',
age:23
}
static propTypes={
name:PropTypes.string,
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.props.age}</Text>
}
这里的defaultProps里面是初始化这个组件的默认值,如果没有收到传递的值,那么就使用默认值,propTypes则是对这些属性的类型的规范,如果传递的不对,那么将给出提示,如果要添加规范,那么需要引用这个类PropTypes
import React, { Component ,PropTypes} from 'react';
下面来看看ES6中传递变量的便捷之处,如果这个params中有很多属性,那么一个个的传递自然不是好的解决方式,这里便使用{…params}的方式传递所有属性;
render() {
var params={name:'aaa',age:18,sex:'男'};
return (
<View style={styles.container}>
<Hello
{...params}
/>
</View>
);
}
还有一种方式传递,获取部分params的属性,然后在通过name={name}的形式传递
render() {
var params={name:'aaa',age:18,sex:'男'};
var {name,age}=params;
return (
<View style={styles.container}>
<Hello
name={name}
age={age}
/>
</View>
);
}
五、State的使用
对于state的理解,其实相当于我们java中定义变量的意思,有两种方式去定义state中的变量,首先来看一下第一种,在constructor中定义,然后通过this.state.size调用
constructor(props){
super(props);
this.state={
size:80
}
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
}
第二种,在constructor外部调用
state={
size:80
}
constructor(props){
super(props);
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
}
下面我们来看下怎么改变设置变量,注意使用View记得导入,调用setState方法在里面改变size的大小
state={
size:80
}
constructor(props){
super(props);
}
render(){
return <View>
<Text
style={{fontSize:20,backgroundColor:'blue'}}
onPress={()=>{
this.setState({
size:this.state.size+10
})
}}
>吹哦啊</Text>
<Text
style={{fontSize:20,backgroundColor:'green'}}
>我的气泡={this.state.size}</Text>
</View>
}
六、ref的使用
ref是组件的一种特殊属性,是组件渲染后,指向组件的一个引用;通俗来说,相当于可以拿到这个组件的引用,组件中的变量,可以通过ref获取,我们看下如何使用ref,有几种方式定义ref,这里说其中一种 ref=”reftest”,然后通过this.refs.reftest获取到该组件的引用,然后调用getsize方法获取四则的值
render() {
return (
<View style={styles.container}>
<Text
onPress={()=>{
var size = this.refs.reftest.getSize();
this.setState({
size:size,
})
}}
>
获取大小:{this.state.size}
</Text>
<Hello
ref="reftest"
/>
</View>
);
}
//=================================================
//组件的渲染,这里提供getSize方法给外部调用
render(){
return <View>
<Text
style={{fontSize:20,backgroundColor:'blue'}}
onPress={()=>{
this.setState({
size:this.state.size+10
})
}}
>吹哦啊</Text>
<Text
style={{fontSize:20,backgroundColor:'green'}}
>我的气泡</Text>
</View>
}
getSize(){
return this.state.size;
}
七、类的使用
这里类的使用跟java类似,有继承和重写,下面我们来看看一个例子,这里同样也是有构造方法,
export default class Student{
constructor(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
getDescription(){
return '姓名'+this.name+'性别'+this.sex+'年龄'+this.age;
}
}
==================================
//在另一个类中初始化
constructor(props){
super(props);
this.stu = new Student('老石','男',28);
}
//调用,this.stu这里已经表示Student的引用
this.stu.getDescription()
我们来看看这里类的继承
import Student from "./Student";
export default class MyStudent extends Student{
//调用父类构造函数
constructor(){
super('小明','女',25);
}
//重写父类的方法
getDescription(){
return '我的'+super.getDescription();
}
}