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('已收藏');

存儲(chǔ)

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';
/*
   * IMMEDIATE(0) // 更新完畢，立即生效
   * ON_NEXT_RESTART(1) // 下次啟動(dòng)生效
   * ON_NEXT_RESUME(2) // 切到后臺(tái)，重新回來(lái)生效
   */
  componentDidMount () {
    codePush.sync({
      updateDialog: {
        optionalIgnoreButtonLabel: '稍后',
        optionalInstallButtonLabel: '更新',
        mandatoryUpdateMessage: '',
        optionalUpdateMessage: '',
        appendReleaseDescription: true,
        descriptionPrefix: '有新版本，是否下載？\n\n ===更新內(nèi)容===\n',
        title: '更新提示'
      },
      installMode: codePush.InstallMode.ON_NEXT_RESUME
    })
  }

寬度高度

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
    }
}

首頁(yè)

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 {
    //注冊(cè)Android環(huán)境物理返回監(jiān)聽(tīng)事件
    componentWillMount(){
        BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }

    //解綁Android環(huán)境物理返回監(jiān)聽(tīng)事件
    componentWillUnmount() {
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }

    //Android物理返回鍵處理
    onBackAndroid = () => {
        const routers = this.props.navigator.getCurrentRoutes();
        // 當(dāng)前頁(yè)面不為root頁(yè)面時(shí)的處理
        if (routers.length > 1) {
            const top = routers[routers.length - 1];
            if (top.ignoreBack || top.component.ignoreBack) {
                // 路由或組件上決定這個(gè)界面忽略back鍵
                return true;
            }
            const handleBack = top.handleBack || top.component.handleBack;
            if (handleBack) {
                // 路由或組件上決定這個(gè)界面自行處理back鍵
                return handleBack();
            }
            // 默認(rèn)行為： 退出當(dāng)前界面。
            navigator.pop();
            return true;
        }

        if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
            //最近2秒內(nèi)按過(guò)back鍵，可以退出應(yīng)用。
            return false;
        }
        this.lastBackPressed = Date.now();
        ToastAndroid.show('再按一次退出應(yīng)用', ToastAndroid.SHORT);
        return true;
    };
    render() {
        return (
            <View style={{flexGrow: 1}}>
                <Main navigator={this.props.navigator}/>
            </View>
        );
    }
}