美文网首页
ReactNative Mobx的简单实例

ReactNative Mobx的简单实例

作者: 周南城 | 来源:发表于2018-05-21 17:40 被阅读391次

安装mobx组件

npm install mobx mobx-react --save

安装装饰器

因为会用到ES7的装饰器(会适当的简化代码),所以在此安装一下

npm install babel-plugin-transform-decorators-legacy --save-dev

然后在.babelrc文件中配置,启用一下这个插件

"plugins": ["transform-decorators-legacy"]

注意:transform-decorators-legacy 需放在首位,参考issue

实现

创建一个store文件,把所有store放里面,在根RootStore里,把其他store实例化

/**
 * Description:根store
 *
 * Author: zoe
 * Time: 2018/5/21 0016
 */
import { observable,action } from 'mobx'

class RootStore {
    constructor() {
        this.nameStore = new NameStore();
        this.ageStore = new AgeStore();
    }
}

class NameStore{

    //被观察的字段
    @observable
    name = 'Zoey';

    //被观察的操作
    @action
    setName(newName){
        this.name=newName;
    }
}

class AgeStore{

    @observable
    age = '18';

    @action
    setAge(newAge){
        this.age=newAge;
    }
}

export default new RootStore();

在根布局上,使用provider实现全局注册,rootStore为未来用到的地方inject的名字

import React, { PureComponent } from 'react';
import TestPage from "./app/TestPage";
import { Provider } from 'mobx-react'
import stores from './app/stores'

export default class App extends PureComponent {
    render() {
        return (
            <Provider rootStore={stores}>
                <TestPage/>
            </Provider>
        );
    }
}

在需要使用的地方,使用inject方法注入store,observer为观察者

/**
 * Description:
 *
 * Author: zoe
 * Time: 2018/5/21 0017
 */
import React, { Component } from 'react';
import {
    Text,
    StyleSheet,
    View,
} from 'react-native';

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

@inject('rootStore')
@observer
export default class TestPage extends Component {

    nameStore=this.props.rootStore.nameStore;
    ageStore=this.props.rootStore.ageStore;

    onChange() {
        this.nameStore.setName("Jack");
        this.ageStore.setAge("20");
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>{'姓名:'+this.nameStore.name+'\n 年龄:'+this.ageStore.age}</Text>
                <Text style={styles.btn} onPress={() => this.onChange()}>点我换换</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor : 'white',
    },btn:{
        marginTop:20,
        fontSize:20,
        fontWeight :'200',
        color :'black'
    }
});
按钮点击前 按钮点击后

传送门

相关文章

  • ReactNative Mobx的简单实例

    安装mobx组件 安装装饰器 因为会用到ES7的装饰器(会适当的简化代码),所以在此安装一下 然后在.babelr...

  • mobx-react 入门使用实例

    mobx 管理应用程序的状态 mobx实例 一、 新建应用 mobx-test,简单配置webpack 控制台,创...

  • ReactNative开发的简单总结

    1、实例: 使用ReactNative实现简单的登录页面 1.1、开发工具: xcode8.1(需要配置React...

  • create react app配置webpack

    前言 作者刘俊余,擅长前端开发(Html5,ReactNative,Js框架)最近在折腾React+Mobx+An...

  • MobX的简单了解

    MobX MobX 是一种简单、可扩展的状态管理,猪齿鱼框架就是用它进行状态管理。 简单理解 mobx修饰组件就是...

  • Mobx实例应用

    背景: 这个问题要从一个后台管理系统的权限管理开始说起,我们将后台权限管理系统可以分为几个层级,如下: 账号登录,...

  • 使用mobx

    mobx树型结构组织项目状态管理 遵循mobx定义数据存储 一个简单的mobx数据仓库: 因为使用了mobx作为状...

  • 一分钟搞定 react-native mobx

    这里简单介绍mobx的用法 首先 要装几个第三方库npm i mobx -savenpm i mobx-react...

  • 初识 MobX + React-Native + React R

    MobX 简单、可扩展的状态管理(可观察的数据) 使用: 安装: npm install mobx --save。...

  • React + MobX 状态管理入门及实例(二)

    在上一章 React + MobX 状态管理入门及实例(一) 应用实例TodoList的基础上 增加ant-des...

网友评论

      本文标题:ReactNative Mobx的简单实例

      本文链接:https://www.haomeiwen.com/subject/lndqjftx.html