儲存

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