一个标准的 react-native 组件

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前言：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 定义样式表；

定义：

使用：

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

以上是 一个标准的 react-native 组件 的全部内容， 来源链接： utcz.com/z/382869.html

回到顶部