React Native学习记录文档

React Native学习记录

---

2020/1/14

1. 关于平台搭建的

• node,python2,yarn,android studio
• 创建项目 --> npx react-native init MyApp
• 运行项目
  1. 在项目目录下开服务 -->npm start or react-native start
  2. 运行安卓项目 --> yarn react-native run-android

---

2. 一些关键语句

// 1. 引入组件，以来react和组件，这两个都要引入，还有需要用到的基础组件也都要引入
import React ,{ Component } from 'react';
import {
    Text,
    View,
    ScrollView
} from 'react native';
// 2. 跟react一样地语法导出组件
export default class myDemo entends Component{
    constructor(){ // 2.1一样地构造函数
        super();
        this.state = {
            state1: 1,
            state2: 2
            ...
        }
    }
    render(){// 2.2 组件渲染主体
        const rowArr = ;//可以写一些需要的参数
        return(
            <></>
        )
    }
    _myRender(){ //2.3 自定义函数，建议使用_进行和库函数的区分
        static defaultprops = {
            data: {}
        }
    }
} 
// 3. 样式定义，建议放在最下面，不影响整个的书写，注意StyleSheets也需要引入
const styles = StyleSheets.create({
});

---

3.一个下拉刷新的Demo

• 思路+实现
  1. 首先是需要显示的列表数据rowDataArr，来自state（网络数据）
  2. 获取到数据按条显示，用一个Row组件来确定每一条的样式，然后再新建一个rowsArr用于返回一个带样式的数组，用map对原始的rowDataArr做处理，得到新的rowsArr
  3. 以上即可渲染出一个初始列表
  4. 实现下拉刷新这一函数，需要在refreshControl属性中绑定组件
  5. 组件需要一个refreshing状态，初始值为false，不刷新
  6. onRefresh状态函数，当下拉时，就加载函数
  7. 自定义_onRefresh()函数,首先调用函数时，立即改变refreshing状态，变为true；然后开始执行一个函数，创建一个新的数组newData，将在原先的rowDataArr中追加新的数组；更新状态：将rowDataArr更新为追加后的新数组，将refreshing重新置为false。以上全部应当放在一个setTimeout函数中，设置时间为2000ms
  8. 以上就是所有的操作

---

4. FlatList

• FlatList的相关属性和函数, renderItem, keyExtactor, numColums,还有跟表头表尾相关的
• data目前只能接收Array数据，其他数据都不行
• 如