有一种选择叫做格子里

发表于 更新于 分类于 Waline： 本文字数： 160 阅读时长 ≈ 1 分钟

封装操作 RNstorage 的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- storage.js -->

import { AsyncStorage } from 'react-native'

async function save(key, value) {
  try {
    // console.log("Set item: %s, %o", key, value)
    await AsyncStorage.setItem(key, value)
  } catch (error) {
    // console.log("Set item fail %o", error)
  }
}

async function query(key) {
  try {
    // console.log("Get item: %s", key)
    let value = await AsyncStorage.getItem(key)
    return value
  } catch (error) {
    // console.log("Get item fail %o", error)
  }
}

async function remove(key) {
  try {
    // console.log("Remove item: %s", key)
    await AsyncStorage.removeItem(key)
  } catch (error) {
    // console.log("Remove item fail %o", error)
  }
}

export { save, query, remove }

阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 622 阅读时长 ≈ 2 分钟

简述

  • Reducers 负责处理 action 的 state 更新；
  • Sagas 负责协调那些复杂或异步的操作。

安装

npm install --save redux-saga

1
2
3
4
5
6
7
8
9
10
11
12
// ...
import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";

// ...
import { rootSaga } from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

const action = (type) => store.dispatch({ type });
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

一、认识 Redux

安装

npm install --save redux
npm install --save react-redux

一句话理解 Redux

应用中的所有state都以一个对象数树的方式存储在一个单一的store中，唯一改变state的方法就是触发action，一个描述发生什么的对象，为了描述action如何改变state树，需要编写reducers。

什么是 Action？

Action本质上是JavaScript的普通对象，action内必须使用一个字符串类型的type字段来表示将要执行的动作。多数情况下type会被定义成字符串常量。我们应该尽量减少在actin中传递数据。

1
2
3
4
5
6
7
8
9
10
Action：
export const ADD = 'ADD'
export const add = () => ({
    type: ADD
})

export const SUB = 'SUB'
export const sub = () => ({
    type: SUB
})
阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 805 阅读时长 ≈ 3 分钟

image.png

什么是 MVVM？

  • MVVM 是 Model-View-ViewModel 的简写。

MVC 和 MVP，MVVM 之间的关系

MVC 和 MVP 的关系

  • 我们都知道 MVP 是从经典的模式 MVC 演变而来，它们的基本思想有相通的地方：Controller/Presenter 负责逻辑的处理，Model 提供数 据，View 负责显示。作为一种新的模式，MVP 与 MVC 有着一个重大的区别：在 MVP 中 View 并不直接使用 Model，它们之间的通信是通过 Presenter (MVC 中的 Controller)来进行的，所有的交互都发生在 Presenter 内部，而在 MVC 中 View 会直接从 Model 中读取数据而不是通过 Controller。
    阅读全文 »

发表于 更新于 分类于 Waline： 本文字数： 1.2k 阅读时长 ≈ 4 分钟

React Native 是 FaceBook 开源的一个项目，FaceBook 希望可以用写 Web App 的方式去写 Native App。它可以让我们用 JS 和 React 来开发应用，使用 React Native 可以通吃 Android 和 IOS ,以及 Web,仅仅需要一份业务逻辑代码就可以来创建我们的应用。

起源

React Native 是由 React 衍生出来的，而 React 起源于 Facebook 的内部项目，因为 FaceBook 对市场上所有 JavaScript MVC 框架，都不太满意，就决定自己写一套，用来架设自己的 Instagram 的网站。等做出来以后，发现这套东西很不错，而且好用，就在 2013 年 5 月开源了。

而衍生的 React Native 项目，希望用写 Web App 的方式去写 Native App。这样同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机上。FaceBook 最早发布的关于 React Native 是针对 IOS 的，而 React Native for Android 是在去年也就是 2015 年 9 月 15 日开源发布的。现阶段 React Native 的体验虽然已经很不错了，很接近原生应用的体验。

阅读全文 »
0%