Mbox-React Native

Mbox-React Native

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

MboX環境配置:npm

 

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經常使用的標籤react-native

@observable: 使用此標籤監控要檢測的數據;
@observer: 使用此標籤監控當數據變化是要更新的Component(組件類)
@action:使用此標籤監控數據改變的自定義方法(當在須要數據改變的時候執行此自定義方法,
那麼View層也會跟着自動變化,默認此View層已經使用@observer標籤監控)

注:簡單的數據,能夠直接進行讀取和複製操做,View也會變化;babel

/* * 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); }; }
相關文章
相關標籤/搜索