react-native-utils

react native 日常工具组件封装

安装

yarn add git+https://github.com/25juan/react-native-utils.git

camera自动适应容器用法

import { FillToAspectRatio } from "react-native-utils";
<FillToAspectRatio>
<RNCamera { ...cameraProps }/>
</FillToAspectRatio

不同设备设置字体 宽度高度自适应

import { Text,View } from "react-native" ;
import { StyleUtils } from "react-native-utils";
<View style={{ fontSize:StyleUtils.getAutoSize(50) }}>
<Text style={{ fontSize:StyleUtils.getTextSize(14) }}/>
</View

工具组件API方式调用

import React, { Component, lazy, Suspense } from "react";
import { Text,View } from "react-native" ;
import { Dialog,RNDialog } from "react-native-utils";
let Navigation = lazy(() => import("./navigation"));
// 这儿通过 Suspense动态加载组件，等待Dialog渲染完成之后，
// Navigation组件里面才能调用对话框组件API
class App extends React.Component{
componentDidMount(){
// 调用弹框
RNDialog
.Alert
.showAlert({
title:'消息',
content:"",
buttons:[{
text:"取消",
props:{}}]
}).then(idex=>alert(`${idex}`)) ;
// Picker 框调用 RNDialog
.Picker
.showPicker({
title:'消息',
data:[{
title:"成都"
},{
title:"北京"
}]
}).then(obj=>console.log(obj));
// Toast 调用
RNDialog
.Toast
.show("Toast 调用成功");
// Loading 调用
RNDialog
.Loading
.show("数据加载中");
// Loading 调用
RNDialog
.FlatListPicker
.show([{ label:"22",id:22 },{ label:"11",id:11 }]
,[11]).then(result=>{
console.log(result); });
// AlertInput 调用
RNDialog.AlertInput.showAlert({
title:"修改",
content:"修改您的昵称",
inputProps:{
multiline:true,
style:{
height:50
}
}
}).then((obj)=>{
console.log(obj)
})
}
render() {
return (
<>
<Suspense fallback={<Loading />}>
<Navigation
ref={navigator => {
NavigationService.setTopLevelNavigator(navigator);
}}/>
</Suspense>
<Dialog />
</>
);
}
}