一文学会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 = () => <View>
  <Text>JSX</Text>
</View>

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);
复制代码

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 (
      <View  >
        <Provider rootStore={rootStore} >
          <Sub1></Sub1>
        </Provider>
      </View>
    );
  }
}
复制代码

在其他组件内使用

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 (
      <View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>
    );
  }
}

export default Index;
复制代码