React-native中的弹窗提示组件

开发中遇到需要在网络请求错误的时候提供一个统一的界面,结合Redux和一个封装好的组件,很好处理.这个组件在iReading和reddit的app里面都使用过,使用比较简单
直接参照ireading代码

github:react-native-root-toast

安装 需要这个组件

在./app/utils/ToastUtils.js文件中定义了方法

import {
  Platform
} from 'react-native';
import Toast from 'react-native-root-toast';//导入组件

let toast;
//短时间提示的方法
export const toastShort = (content) => {
  if (toast !== undefined) {
    Toast.hide(toast);
  }
  toast = Toast.show(content.toString(), {
    duration: Toast.durations.SHORT,
    position: Platform.OS === 'android' ? Toast.positions.BOTTOM : Toast.positions.CENTER,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0
  });
};
//长时间提示的方法
export const toastLong = (content) => {
  if (toast !== undefined) {
    Toast.hide(toast);
  }
  toast = Toast.show(content.toString(), {
    duration: Toast.durations.LONG,
    position: Platform.OS === 'android' ? Toast.positions.BOTTOM : Toast.positions.CENTER,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0
  });
};

由于ireading的最新版改为使用redux-saga的中间件来处理具体的逻辑，所以网络请求处理的问题也在saga里.如果没有使用redux-saga这部分放到actions里做也是可以的,reddit好像是这么搞的.或者你可以看看ireading的以前使用redux-thunk的版本.

./app/sagas/read.js

 import { toastShort } from '../utils/ToastUtil';//导入toast
import { request } from '../utils/RequestUtil';
import { WEXIN_ARTICLE_LIST } from '../constants/Urls';
import { fetchArticleList, receiveArticleList } from '../actions/read';

export function* requestArticleList(isRefreshing, loading, typeId, isLoadMore, page) {
  try {
    yield put(fetchArticleList(isRefreshing, loading, isLoadMore));
    const articleList = yield call(request,
      `${WEXIN_ARTICLE_LIST}?typeId=${typeId}&page=${page}`,
      'get');
    yield put(receiveArticleList(articleList.showapi_res_body.pagebean.contentlist, typeId));
    const errorMessage = articleList.showapi_res_error;
    if (errorMessage && errorMessage !== '') {
      yield toastShort(errorMessage); //错误处理
    }
  } catch (error) {
    yield put(receiveArticleList([], typeId));
    toastShort('网络发生错误，请重试');//还是错误处理
  }
}

效果嘛,看组件 github的图片

Toast图片

图太大，gif还不知道怎么改大小.

结束