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