前言：react-native开发的app，虽然说是兼容 android 和 ios 两端；但其框架本身的设计思想有很多还是和前端类似的（毕竟是 react 的衍生产物）；其开发模式主要还是组件化！
今天，来总结一下，一个 react-native 标准的组件包括哪些元素：
标准的组件完整代码：
import React, {Component} from "react";
import {
StyleSheet,
View,
Text,
TouchableOpacity,
} from "react-native";
export default class StateDemoScreen extends Component{
constructor(){
super();
this.state = {
a : 0,
};
this.num = 1;
}
jian(){
const {a} = this.state;
this.setState({a : a-1});
}
add(){
const {a} = this.state;
this.setState({a : a+1});
}
render(){
const {a} = this.state;
return(
<View style={{flex:1,backgroundColor:'#eee'}}>
<View style={innerBox}>
<View style={styles.container}>
<TouchableOpacity style={styles.btnStyle} onPress={() => this.jian()}><Text> - </Text></TouchableOpacity>
<Text> {a} </Text>
<TouchableOpacity style={styles.btnStyle} onPress={() => this.add()}><Text> + </Text></TouchableOpacity>
</View>
</View>
</View>
);
}
}
const innerBox = {
flex:1,
flexDirection : 'column',
justifyContent : 'center',
alignSelf : 'center',
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'center',
},
btnStyle: {
height : 20,
borderWidth: 1,
borderColor: '#aaa',
borderRadius: 4,
paddingHorizontal: 6,
marginHorizontal: 6,
},
});总结分析：
1. 构造函数 constructor； ==>> 可选；如果没有，会自动添加一个空的（包含super();）的构造函数
注意：在react-native的各个生命周期函数中，都可以使用 this.props 访问到从父组件传过来的属性；但在构造函数 constructor 中不行，如果想在 constructor 中使用 this.props ，需要将props传入！
没有props：
传入props：
可包含元素：
a. super(); ==>> 必须；
作用：继承父类（Component）的this。
即：它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会 报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super 方法，子类就得不到this对象。
报错 ===>>>
b. 初始化state; ==>> 可选；
作用：给组件中要用的的state定义变量名和初始值。
定义方式：this.state = { 变量名1：初始值1， ... };
c. 定义全局的变量（不是state）; ==>> 可选；
作用：类似于state，但不同的是使用state，在使用setState方法改变state的值之后，会有一个重新render的过 程；定义全局变量就不会有这个问题；
定义方式：this.变量名 = 初始值; ==>> 和定义state同级；如：this.num = 1;
2. render() { return(); }; ==>> render函数，必须有；需要return一个并且只一个组件
3. 自定义方法；==>> 可选
定义：函数名() { ... }; ==>> 如：add() { ... };
使用：() => this.函数名(); 或 this.函数名.bind(this);
4. 样式的三种定义方法；
方法一：行内定义；
方法二：定义一个样式对象；
定义：
使用：
方法三：使用 StyleSheet 定义样式表；
定义：
使用：
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！