Mbox-React Native

学习网址:https://www.jianshu.com/p/bbf9837443f3

MboX环境配置:

.npm i mobx mobx-react --save //引入mobx
.npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage- --save-dev //能够使用@标签
.在.babelrc文件中修改为{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}

mobx常用的标签

@observable: 使用此标签监控要检测的数据;
@observer: 使用此标签监控当数据变化是要更新的Component(组件类)
@action:使用此标签监控数据改变的自定义方法(当在需要数据改变的时候执行此自定义方法,
那么View层也会跟着自动变化,默认此View层已经使用@observer标签监控)

注:简单的数据,可以直接进行读取和复制操作,View也会变化;

/* * nornj&react配合应用 
导入相关依赖
* */
import React, {Component} from 'react';
import {
View,
StyleSheet,
ScrollView,
Text,
} from 'react-native'; /*
* 引入这个两个头文件
* */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native'; /*
* 假数据
* */
const datas = [
{name:'苹果',count:0},
{name:'梨',count:0},
{name:'香蕉',count:0},
{name:'草莓',count:0},
{name:'橘子',count:0},
]; /*
* 对整个列表添加观察,观察列表个数的变化
* */
@observer
export default class MobxTestSecond extends Component { /*
* 数据管理器
* */
dataManager = new DataSource(); componentWillMount() {
/*
* 赋值初始数据
* */
this.dataManager.replace(datas);
} /*
* 添加一个新的Item
* */
addItem = () => {
let item = {name:'西瓜',count:0};
this.dataManager.addItem(item)
}; /*
* 删除第一个Item
* */
deleteItem = () => {
this.dataManager.deleteItem(0);
}; render() {
return (
<View style={styles.container}>
<View style={styles.addItemView}>
<Text style={styles.addItem} onPress={this.addItem}>增加</Text>
<Text style={styles.addItem} onPress={this.deleteItem}>删除</Text>
</View>
<ScrollView>
{
this.dataManager.dataSource.slice(0).map((item,i)=> <ItemView key = {i} item = {item}/>)
}
</ScrollView>
</View>
);
}
} /*
* 对每一个Item添加观察,改变个数
* */
@observer
class ItemView extends Component { countAdd = () => {
this.props.item.add();
}; countDec = () => {
this.props.item.dec();
}; render() {
const {item} = this.props;
return (
<View style={styles.itemContainer}>
<Text>{item.name}</Text>
<Text>{item.count}</Text>
<Text style={styles.btn} onPress={this.countAdd}> + </Text>
<Text style={styles.btn} onPress={this.countDec}> - </Text>
</View>
);
}
} /*
* 整个列表页数据管理器
* */
class DataSource {
// 本地数据源
@observable
dataSource = []; // 添加初始数据
@action
replace = (items) => {
// 1. 清空原数据
this.dataSource.splice(0, this.dataSource.length); // 2. 加载新数据
items.map((item, i) => {
this.dataSource.push(new Item(item));
});
}; // 添加新数据
@action
addItem = (item) => {
this.dataSource.unshift(new Item(item));
}; // 删除一条数据
@action
deleteItem = (idx) => {
this.dataSource.splice(idx, 1);
};
}
/*
* 单条Item数据管理器
* */
class Item { /*
* 商品名称(此值是不变的所以不需要检测此值)
* */
name; /*
* 监控商品个数
* */
@observable
count; constructor(item) {
this.name = item.name;
this.count = item.count;
}; /*
* 商品个数+1
* */
@action
add = () => {
this.count += 1;
}; /*
* 商品个数-1
* */
@action
dec= () => {
this.count > 0 && (this.count -= 1);
};
}

Mbox-React Native的更多相关文章

  1. 选择 React Native 的理由

    转载:选择 React Native 的理由 从开始知道 React Native 到现在已经过了5个月,真实的试用也经历了三个月的时间.阅读文档开始,了解是什么,到简单的理解为什么,都是在聆听不同的 ...

  2. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  4. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  7. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  8. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  9. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  10. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

随机推荐

  1. Codeforces Round #430 (Div. 2) - D

    题目链接:http://codeforces.com/contest/842/problem/D 题意:定义Mex为一个序列中最小的未出现的正整数,给定一个长度为n的序列,然后有m个询问,每个询问给定 ...

  2. 【转】Linux下的磁盘分区方法

    转自:https://www.cnblogs.com/lbole/p/8904298.html 一.硬盘接口类型 硬盘的接口主要有IDE.SATA.SCSI .SAS和光纤通道等五种类型.其中IDE和 ...

  3. 004-sed 命令使用

    sed 命令使用 主要作用是用来将数据进行选取,替换,删除,新增的命令,与vim类似 选项: -n : 只显示经过sed处理的数据,打印到屏幕 -e: 运行多个条件同时运行 -i: 直接修改文件 -p ...

  4. Tensorflow 2.0 学习资源

    我从换了新工作才开始学习使用Tensorflow,感觉实在太难用了,sess和graph对 新手很不友好,各种API混乱不堪,这些在tf2.0都有了重大改变,2.0大量使用keras的 api,初步使 ...

  5. Codeforces 922 思维贪心 变种背包DP 质因数质数结论

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  6. LeetCode--022--括号生成(python)

    给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: class Solution: def generateParenth ...

  7. 多线程之同时更改数据问题--启用lock

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. mysql ORDER BY语句 语法

    mysql ORDER BY语句 语法 作用:用于对结果集进行排序. 语法:顺序:SELECT * from 表名 ORDER BY 排序的字段名  倒序:SELECT * from 表名 ORDER ...

  9. 软件安装——彻底卸载MySQL

    如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...

  10. 网络抓包wireshark2

    1.基本使用详见网络抓包wireshark,第一篇 2.中文版 2.1打开首页 2.2选择网卡 菜单栏->捕获->选项->输入(选择当前计算机网络ip对于的接口)->点击开始 ...