前言
前提是你已经搭好环境，并且能跑起来;
否则的话先进行：Mac环境搭建,目标：ios
本项目使用的依赖：
"dependencies": {
"lodash": "^4.17.5","mobx": "^4.1.0","mobx-react": "^5.0.0","native-base": "^2.3.5","react": "^16.3.0-alpha.1","react-native": "0.54.4","react-navigation": "^1.5.8"
},
准备工作
1. 安装相应依赖：mobx 和 mobx-react;
npm i mobx mobx-react --save
2. 安装一些 babel 插件，以支持 ES7 的 decorator 特性:
npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev
3. 打开 .babelrc 没有就创建一个，配置 babel 插件:
touch .babelrc
写入：
{
'presets': ['react-native'],'plugins': ['transform-decorators-legacy']
}
补充：ES7装饰器语法在编译器可能会报错；我这里用的是vscode，分享解决办法：
- 找到 首选项 > 设置 > 工作区设置;
- 加入以下代码：
"javascript.implicitProjectConfig.experimentalDecorators": true
至此准备工作已经差不多了，接下来写代码。。。
加入Mobx
1. 根目录下新建 js文件夹； js下新建store文件夹；
2. store下新建index.js 作用是合并每个store到一个store中去，最终通过 <Provider {...store}>方式注入<App/>;
3.分别在store下新建几个js，示例：
// home
import { observable,action } from "mobx";
class HomeStore {
@observable text; // 注册变量，使其成为可检测的
@observable num;
constructor() {
this.num = 0; // 初始化变量，可以定义默认值
this.text = "Hello,this is homePage!!!";
}
@action // 方法推荐用箭头函数的形式
plus = () => {
this.num += 1;
};
@action
minus = () => {
this.num -= 1;
};
}
const homeStore = new HomeStore();
export { homeStore };
// user
import { observable,action } from "mobx";
class UserStore {
@observable userInfo;
@observable text;
constructor() {
this.userInfo = "123";
this.text = "Hello,this is UserPage!!!";
}
@action
getListData = () => {
fetch(`http://yapi.demo.qunar.com/mock/5228/record/list`)
.then(
action("fetchRes",res => {
return res.json();
})
)
.then(
action("fetchSuccess",data => {
return (this.userInfo = data);
})
)
.catch(
action("fetchError",e => {
console.log(e.message);
})
);
};
}
const userStore = new UserStore();
export { userStore };
4. 通过index文件合并：
import { homeStore } from "./home";
import { saleStore } from "./sale";
import { userStore } from "./user";
const store = { homeStore,saleStore,userStore };
export default store;
5. 在组件中使用Mobx：
js目录下新建tabs文件夹，新建HomeScreen.js
import React,{ Component } from "react";
import { View,Text,StyleSheet,TouchableOpacity } from "react-native";
import { connect } from "mobx-react";
import { observer,inject } from "mobx-react";
import { Button,Container } from "native-base";
import Headers from "../common/components/header";
@inject(["homeStore"]) // 注入对应的store
@observer // 监听当前组件
class HomeScreen extends Component {
constructor(props) {
super(props);
this.store = this.props.homeStore; //通过props来导入访问已注入的store
this.state = {
};
}
render() {
const { text,num } = this.store;
return (
<Container>
<Headers
title="首页"
type='index'
navigation={this.props.navigation}
/>
<Text>{text}</Text>
<Button primary onPress={() => this.store.plus()}>
<Text>add</Text>
</Button>
<Text>{num}</Text>
<Button primary onPress={() => this.store.minus()}>
<Text>Minu</Text>
</Button>
</Container>
);
}
}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: "center",alignItems: "center",backgroundColor: "#F5FCFF"
}
});
6. 目前组件中还拿不到当前组件的store，接下来注入store；
在初始化的项目结构中，项目运行的入口文件是index.js,注册了同级目录下的App.js;
// index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('demo',() => App);
由于需要在App.js上套入store 所以改写结构，
1. js文件夹下新建App.js
touch App.js
可以把根目录下App.js的内容copy过来，然后删掉根目录下App.js文件;
2. js目录下新建 setup.js 文件；
import React from "react";
import { Provider } from "mobx-react";
import App from "./App";
import store from "./store";
export default function setup() {
class Root extends React.Component {
render() {
return (
<Provider {...store}>
<App />
</Provider>
);
}
}
return Root;
}
3. 修改index启动页代码：
import { AppRegistry } from 'react-native';
import setup from "./js/setup";
AppRegistry.registerComponent('******',() => setup());
现在store已经注入，在每个组件中也可以拿到当前store的数据了；可以进行代码开发了； （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
