React-Native封装一些模块

react-native-root-toast使用

/**
 *ToastUtil.js
 */
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: 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: Toast.positions.BOTTOM,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0
  });
};

import { toastShort } from '../common/ToastUtil';
  toastShort('已收藏');

存储

import React from 'react-native';

const { AsyncStorage } = React;

class DeviceStorage {
  static get(key) {
    return AsyncStorage.getItem(key).then((value) => {
      const jsonValue = JSON.parse(value);
      return jsonValue;
    });
  }

  static save(key, value) {
    return AsyncStorage.setItem(key, JSON.stringify(value));
  }

  static update(key, value) {
    return DeviceStorage.get(key).then((item) => {
      value = typeof value === 'string' ? value : Object.assign({}, item, value);
      return AsyncStorage.setItem(key, JSON.stringify(value));
    });
  }

  static delete(key) {
    return AsyncStorage.removeItem(key);
  }
}

export default DeviceStorage;

更新

import CodePush from 'react-native-code-push';
  componentDidMount() {
    CodePush.sync({
      deploymentKey: 'lCYb0hSXQUEJHWiSykloC7wXu_19V1dAekTcW',
      updateDialog: {
        optionalIgnoreButtonLabel: '稍后',
        optionalInstallButtonLabel: '后台更新',
        optionalUpdateMessage: '“   ”有新版本了，是否更新？',
        title: '更新提示',
      },
      installMode: CodePush.InstallMode.ON_NEXT_RESTART,
    });
  }

宽度高度

import {Dimensions} from 'react-native';

let window = {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
}
export default {
    window: window,
}

路由

import React, {
    Component
} from 'react'

import {
    Navigator,
    Platform,
    View
} from 'react-native'

import IndexView from '../Index/Index'
export default class NavigatorComp extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    initialRoute={{name: 'indexView',component:IndexView}}
                    configureScene={this._configureScene}
                    renderScene={this._renderScene}
                />
            </View>
        )
    }

    _renderScene(route, navigator) {
        return <route.component navigator={navigator}  {...route.params} />;
    }

    _configureScene(route, routeStack) {
        switch (route.type) {
            case 'floatFromBottom':
                return Navigator.SceneConfigs.FloatFromBottom
            default:
                return Navigator.SceneConfigs.PushFromRight
        }
    }
}

const styles = {
    container: {
        flexGrow: 1
    }
}

首页

import React, {Component} from 'react';
import {
    View,
    BackAndroid,
    ToastAndroid
} from 'react-native';

import Main from '../Main/Main';
import NavbarComp from '../Navigator/navigator'

export default class IndexView extends Component {
    //注册Android环境物理返回监听事件
    componentWillMount(){
        BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }

    //解绑Android环境物理返回监听事件
    componentWillUnmount() {
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }

    //Android物理返回键处理
    onBackAndroid = () => {
        const routers = this.props.navigator.getCurrentRoutes();
        // 当前页面不为root页面时的处理
        if (routers.length > 1) {
            const top = routers[routers.length - 1];
            if (top.ignoreBack || top.component.ignoreBack) {
                // 路由或组件上决定这个界面忽略back键
                return true;
            }
            const handleBack = top.handleBack || top.component.handleBack;
            if (handleBack) {
                // 路由或组件上决定这个界面自行处理back键
                return handleBack();
            }
            // 默认行为： 退出当前界面。
            navigator.pop();
            return true;
        }

        if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
            //最近2秒内按过back键，可以退出应用。
            return false;
        }
        this.lastBackPressed = Date.now();
        ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
        return true;
    };
    render() {
        return (
            <View style={{flexGrow: 1}}>
                <Main navigator={this.props.navigator}/>
            </View>
        );
    }
}