一文学会React Native（保姆级教程） 持续更新

React Native 官网

如果react基础有些遗忘，可以打开React官网查看

介绍

React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native，您可以使用 JavaScript 来访问移动平台的 API，以及使用 React 组件来描述 UI 的外观和行为：一系列可重用、可嵌套的代码。

ReactNative环境搭建相比较繁琐 按照React Native 官网进行安装，就可以了，如果失败可以多试几次，也可以在下方留言，在这里就不再多说了

初始化项目

npx react-native init myApp

安装投影工具

scrcpy地址

使用方法：

下载 scrcpy手机通过usb连接电脑双击打开工具即可

React Native基础

文件目录结构

│ App.js --- 项目的根组件

│ index.js --- 项目的入口文件

│ package.json --- 项目的描述文件

│ .eslintrc.js --- eslint的配置文件

│ .prettierrc.js --- 格式化配置文件

│ android --- 编译安卓相关

│ ios --- 编译ios相关

jsx

jsx(全称是 JavaScript xml)格式同学们都比较熟悉了，但是为了新来的同学再写一遍

import React from 'react';

import { View, Text } from 'react-native';

const Index = () =>

JSX

export default Index;

RN样式与web样式不同之处

flex布局

React Native 中使用 flexbox 规则来指定某个组件的子元素的布局，使其可以在不同屏幕尺寸提供一致的布局

flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

flex值越大所占的比例越大

样式继承

背景颜色、字体颜色、字体大小等没有继承，需要单独设置

单位

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

不能加 px 单位不能加 vw vh 等单位可以加百分比单位

屏幕宽度与高度

import {Dimensions } from "react-native";

const screenWidth = Math.round(Dimensions.get('window').width);

const screenHeight = Math.round(Dimensions.get('window').height);

标签

View

相当于以前web中的div不支持设置字体大小,字体颜色等不能直接放文本内容不支持直接绑定点击事件 (一般使用 TouchableOpacity 来代替)

Text

文本标签

文本标签 可以设置字体颜色、大小等支持绑定点击事件

TouchableOpacity

可以绑定点击事件的块级标签

相当于块级的容器支持绑定点击事件 onPress可以设置点击时的透明度

Image

图片标签 引入图片的方式

渲染本地图片时

渲染网络图片时,必须加入宽度和高度

在 Android 上支持 GIF 和 WebP 格式图片

默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块：

dependencies {

// 如果你需要支持Android4.0(API level 14)之前的版本

implementation 'com.facebook.fresco:animated-base-support:1.3.0'

// 如果你需要支持GIF动图

implementation 'com.facebook.fresco:animated-gif:2.0.0'

// 如果你需要支持WebP格式，包括WebP动图

implementation 'com.facebook.fresco:animated-webp:2.1.0'

implementation 'com.facebook.fresco:webpsupport:2.0.0'

// 如果只需要支持WebP格式而不需要动图

implementation 'com.facebook.fresco:webpsupport:2.0.0'

}

之后 重启项目

ImageBackground

一个可以使用图片当作背景的容器,相当于以前的 div+背景图片 引入图片

Inside

TextInput

输入框组件

可以通过 onChangeText事件来获取输入框的值

style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}

onChangeText={text => onChangeText(text)}

value={value}

/>

语法

插值表达式

import React from 'react'

import {View,Text} from 'react-native'

const Index = ()=>

{'你好'}

{55555}

export default Index

组件

类组件

适合复杂的场景有state有生命周期

函数组件

函数组件

没有state (通过hooks可以有) useState 类似 const [value,change] = useState(‘124’)没有生命周期(通过hooks可以有)适合简单的场景

mobox

mobox 相对于redux更简单易用，更适合react-Native的开发

简单，可扩展的状态管理

mobox使用方法和其他的状态管理工具类似

安装依赖

mobx 核心库mobx-react 方便在react中使用mobx技术的库@babel/plugin-proposal-decorators 让 rn 项目支持 es7 的装饰器语法的库

yarn add mobx mobx-react @babel/plugin-proposal-decorators

在 babel.config.js添加以下配置

plugins: [

['@babel/plugin-proposal-decorators', { 'legacy': true }]

]

新建文件 mobx\index.js 用来存放 全局数据

import { observable, action } from "mobx";

class RootStore {

// observable 表示数据可监控 表示是全局数据

@observable name = "hello";

// action行为 表示 changeName是个可以修改全局共享数据的方法

@action changeName(name) {

this.name = name;

}

}

export default new RootStore();

在根组件挂载 需通过Provider来挂载和传递

import React, { Component } from 'react';

import { View} from 'react-native';

import rootStore from "./mobx";

import { Provider} from "mobx-react";

class Index extends Component {

// 正常

render() {

return (

);

}

}

在其他组件内使用

import React, { Component } from 'react';

import { View, Text } from 'react-native';

import {inject,observer } from "mobx-react";

@inject("rootStore") // 注入 用来获取 全局数据的

@observer // 当全局发生改变了 组件的重新渲染 从而显示最新的数据

class Sub1 extends Component {

changeName = () => {

// 修改全局数据

this.props.rootStore.changeName(Date.now());

}

render() {

console.log(this);

### return (

{this.props.rootStore.name}

);

}

}

export default Index;