React Native 使用Mobx

1、安装Mobx

yarn add mobx mobx-react-lite

2、开启装饰器

// tsconfig.json文件中
{
	"compilerOptions":{
		...
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true
		...
	}
}

 3、设置babel

// babel.config.js
module.exports = {
  presets: [..., 'mobx'],
};

4、基本使用

A、创建Class的viewModel

import React from "react";
import {observable, action, makeObservable, makeAutoObservable} from 'mobx'; 

export default class HomeViewModel {
    constructor() {
        //核心代码，用于监听值的改变
        makeAutoObservable(this);
    }
    //状态值
    modalVisible: boolean = false;
    //改变状态值
    changeVisible(value: boolean) {
        this.modalVisible = value;
    }
}

B、页面如何使用 

//导入
import {observer} from 'mobx-react-lite'
import HomeViewModel from "./HomeViewModel";

const HomePage = ({ route, navigation }) => {
  //初始化
  const viewModel = useRef<HomeViewModel>();
  if (viewModel.current == null) {
    viewModel.current = new HomeViewModel();
  }
  //改变值
  onPress={() => {
    viewModel.current?.changeVisible(false);
  }}
  ......
  return (
    ......
  );
}
//导出
export default observer(HomePage);

C、函数式

import { action, computed, makeObservable, observable } from "mobx";

// 建立viewModel
export const contactViewModel = makeObservable({
    count:1,
    get double(){return this.count * 2;},
    // 定义action
    increment(){this.count += 1;},
    decrement(){this.count -= 1;},
},{
    count: observable,//须要响应的属性
    double: computed,//计算属性
    increment: action,//action
    decrement: action,
});