自己 rn 常用的工具类

玩 react-native 的时候,封装了几个自己常用的方法,包括样式,权限,存储等,现在记录一下

import { PermissionsAndroid  } from "react-native";
import { AsyncStorage } from "react-native"
class Utils {
	/**
	 * 将http替换成https
	 */
	static http2https = (url='') => {
		return url.replace(/http:\/\//, "https:\/\/") || 'https://xxxxxx.png'
	}
	/**
	 * 设置 内边距 格式顺序和原生一样
	 */
	static setPadding = (...args) => {
		let len = args.length
		switch(len){
			case 1:
				return {
					paddingTop:args[0],
					paddingRight:args[0],
					paddingBottom:args[0],
					paddingLeft:args[0]
				}
			case 2:
				return {
					paddingTop:args[0],
					paddingBottom:args[0],
					paddingLeft:args[1],
					paddingRight:args[1]
				}
			case 3:
				return {
					paddingTop:args[0],
					paddingLeft:args[1],
					paddingRight:args[1],
					paddingBottom:args[2]
				}
			case 4:
				return {
					paddingTop:args[0],
					paddingRight:args[1],
					paddingBottom:args[2],
					paddingLeft:args[3]
				}
			default :
				return {}
		}
	}
	/**
	 * 设置 外边距 格式顺序和原生一样
	 */
	static setMargin = (...args) => {
		let len = args.length
		switch(len){
			case 1:
				return {
					marginTop:args[0],
					marginRight:args[0],
					marginBottom:args[0],
					marginLeft:args[0]
				}
			case 2:
				return {
					marginTop:args[0],
					marginBottom:args[0],
					marginLeft:args[1],
					marginRight:args[1]
				}
			case 3:
				return {
					marginTop:args[0],
					marginLeft:args[1],
					marginRight:args[1],
					marginBottom:args[2]
				}
			case 4:
				return {
					marginTop:args[0],
					marginRight:args[1],
					marginBottom:args[2],
					marginLeft:args[3]
				}
			default :
				return {}
		}
	}
	/**
	 * @param direction 方向
	 * @param width 宽度
	 * @param style 线条样式
	 * @param color 线条颜色
	 */
	static setBorder = (direction,width,style,color) => {
		return {
			[`border${direction}Width`]:width,
			[`borderStyle`]:style,
			[`border${direction}Color`]:color
		}
	}
	/**
	 * 请求申请权限
	 * @param {常量 大写 string|Array} permissionType 权限类型
	 * @param options 配置选项
	 *  title			string	是	对话框的标题。
		message			string	是	对话框的正文。
		buttonPositive	string	是	同意按钮的文本。
		buttonNegative	string	否	拒绝按钮的文本。
		buttonNeutral	string	否	跳过按钮的文本。
	 * 具体类型详情见: https://reactnative.cn/docs/permissionsandroid/
	 * @returns 
	 */
	static async requestPermission(permissionType,options={}) {
		const type = Array.isArray(permissionType)
		const permission = type ? permissionType.map(item => PermissionsAndroid.PERMISSIONS[item]) : PermissionsAndroid.PERMISSIONS[permissionType]
		// alert(permission)
		try {
			const granted = await PermissionsAndroid[type?'requestMultiple':'request'](
				// PermissionsAndroid.PERMISSIONS.CAMERA,
				// PermissionsAndroid.PERMISSIONS[permissionType],
				permission,
				{
					title: '申请权限',
					message: '我要使用摄像~头',
					buttonNeutral: '等一下',
					buttonNegative: 'NO',
					buttonPositive: 'OK',
					...options
				},
			);
			let obj = {}
			if(type){
				Object.keys(granted).map(key=>{
					obj[key.split(".")[2]] = granted[key] === PermissionsAndroid.RESULTS.GRANTED ? true : false
				})
				return obj
			}else{
				if (granted === PermissionsAndroid.RESULTS.GRANTED) {
					// alert('可以用摄像头了啊');
					return true
				} else {
					// alert('用户没有授权');
					return false
				}
			}
			
		} catch (err) {
			alert(err);
			return false
		}
	}
	
	/**
	 * 保存本地缓存
	 * @param { String } key 键
	 * @param { String } value 值
	 */
	static saveStorage = async (key,value) => {
		try {
			await AsyncStorage.setItem(key, value);
		} catch (error) {
			// Error saving data
			alert('Error saving data')
		}
	}
	/**
	 * 读取本地缓存
	 * @param { String } key 键
	 */
	static getStorage = async (key) => {
		try {
			return await AsyncStorage.getItem(key);
		} catch (error) {
			// Error retrieving data
			alert('Error retrieving data')
		}
	}
}
export default Utils

其中 padding 和 margin 还可以继续简化,在这就不简化了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值