Mbox-React Native

Mbox-React Native

學習網址：https://www.jianshu.com/p/bbf9837443f3

MboX環境配置：

 

1.npm i mobx mobx-react --save //引入mobx
2.npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev //可以使用@標籤
3.在.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); }; }