ReactNative学习笔记

环境搭建

NodeJS
python2
JavaJDK
Android
yarn

如果之前安装过cordova环境，只需要安装python2的环境以及，用npm安装全局yarn即可

React Native基础

可通过adb devices来查看手机是否脸上电脑
使用npx react-native init name即可生成一个最基本的项目
1. index.js里会生成一些默认的逻辑
2. 从ReactNative的包中，导入AppRegistry组件，他的作用是注册项目的首页的
3. AppRegistry.registerComponent(“项目名”,()=>App)
  - 里面的项目名他会自动生成，不用去动他
  - App是页面的首页，可以替换成自己的页面
yarn react-native run-android运行项目

ReactNative的一些区别
1. 在RN中只能使用.js作为组件的后最名，不能使用.jsx
2. 在RN中不能使用网页的所有标签，取而代之的是RN提供的一系列基础的组件，需要从ReactNative包按需导入即可
3. 所有RN中的文本，必须使用RN提供的Text组件包裹
常用组件
- View
- ScrollView
  - 在RN中，当页面超出了显示区域时，不会有滚动条，ScrollView就是解决这个问题的
  - 只要将需要滚动的元素包裹在这个标签中即可
- Text
- TextInput
- Image
  - 用source来代替src（src其实是source的缩写）
  - 引入本地的图片要用require()
  - 引入网络的图片需要用uri:,且需要指定宽高
- Button
  - 是用TouchableOpacity封装的
  - 在Button按钮中，title和onPress 属性是必须的
  - onPress表示触发的事件
- ActivityIndicator
  - 一个加载的小图标
  - 他隐藏了，但是位置还是留着
- KeyboardAvoidingView
  - 本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置，调整自身的 height 或底部的 padding，以避免被遮挡。
- 列表
  - FlatList
    -常用属性（前三个必选属性）
```
+ data：列表要渲染的数据
+ renderItem：通过data渲染数据
+ keyExtractor：此函数用于为给定的 item 生成一个不重复的 key。React期望的是传一个字符串，可以index+""，变成字符串类型
+ numColumns：多列布局只能在非水平模式下使用
+ horizontal：设置为 true 则变为水平布局模式。
+ refreshing：在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。
+ initialNumToRender：指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容
+ initialScrollIndex：开始时屏幕顶端的元素是列表中的第 initialScrollIndex个元素, 而不是第一个元素
+ inverted：列表渲染的方向
```
    - 常用事件
      - onEndReached：快到底部时触发
      - onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位
      - onRefresh：
  - SectionList
    - 分组列表

样式
- 使用StyleSheet.create创建样式对象，可以为create传递一个配置对象，这个对象，就是要创建的样式
- 注意：
  1. 在RN中主轴默认是竖的不是横的
- 文本样式：
  1. numberOfLines
    - 当文本内容超出容器，指定显示多少行，多出的用。。。代替
  2. ellipsizeMode
    - 当文本内容超出容器，指定显示多少行，会显示结尾，中间的用。。。代替，
- 用法：

Code

<View style={styles.app} ></View>



const styles = StyleSheet.create({
	app: {
		flex:1
	}
})

获取screen的数据以及OS

Code

import {Dimensions,Platform} from "react-native";


当前屏幕的宽度：Dimensions.get("window").width
当前屏幕的高度：Dimensions.get("window").height
当前屏幕的分辨率：Dimensions.get("window").scale
当前的平台： Platform.OS

事件

点击
- onPress
  - 点击触发
- onPressIn
  - 按下触发
- onPressOut
  - 按下抬起触发
- onLongPress
  - 长按触发

路由

官方推荐的是reactNavigation,ReactNative不能使用React的路由

Animated

使用动画最最简单的三步

设置初始值
让值变化且开始执行
绑定到试图上

React-Native项目实战

描述：使用React-Native做一款todos的Hybrid App，并且有本地存储功能，能查看之前的签到

开始

使用框架

react-native
- version: 0.61.5,这个没什么好说的
react-native-fs
- 安装npm install react-native-fs --save,version: 2.16.6
- 配置：
  - 在android/settings.gradle下添加
  Code
  1
  2
  + include ':react-native-fs'
  + project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
  - 在android/app/build.gradle下添加
  Code
  1
  2
  3
  4
  dependencies {
  ...
  + compile project(':react-native-fs')
  }
  - 命令行输入npx react-native unlink react-native-fs

react-native-vector-icons

安装import Ionicons from 'react-native-vector-icons/Ionicons'

配置：

在android/app/build.gradle下添加

Code

project.ext.vectoricons = [
 		iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

react-native-fs

文件创建写入

Code

let path = RNFS.DocumentDirectoryPath + '/zrb.txt';

RNFS.writeFile(path, '白鸟留依是我老婆', 'utf8')
    .then((success) => {
        console.log('FILE WRITTEN' + ' ' + path);
    })
    .catch((err) => {
        console.log(err.message);
    });

读取文件方式1

Code

RNFS.readFile(path)
    .then((result)=>{
        console.log(result)
    })

读取文件方式2
- 这种方式可以查看路径下的所有文件，根据需求来使用

Code

// 获取文件列表和目录
RNFS.readDir(RNFS.DocumentDirectoryPath)
.then((result)=>{
    // stat the second file，找到第二个 文件
    // 找到目录下的所有文件
    // 文件下的第2个文件是我创建的，传到下一轮then去
    return Promise.all([RNFS.stat(result[1].path), result[1].path]);

}).then((statResult)=>{

    // 输出文件的路劲查看是否找错找文件
    console.log(statResult[0].path);

    if(statResult[0].isFile()){ 
        //返回的是数组，第一个是对象，第二个是文件
        return RNFS.readFile(statResult[1], 'utf8');
    }

    return 'no file';
}).then((contents)=>{

    // 输出文件内容
    console.log(contents);

}).catch((err) => {
    console.log(err.message, err.code);
});

项目报错

目前还没解决的问题

动态切换标题
来回切换任务的完成状态
文件系统的完成与否
Tab栏