拍摄证件照
https://dfeidao.gitee.io/widgets-mobile/
Installation
yarn add --dev @dfeidao/fd-m000022
需要在android配置
路径 android/app/build.gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'
...
}
...
}
路径 android/build.gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
...
}
}
路径 android/app/src/main/AndroidManifest.xml
<!--拍照-->
<uses-permission android:name="android.permission.CAMERA" />
<!--写入SD卡的权限:如果你希望保存相机拍照后的照片-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!--读取SD卡的权限:打开相册选取图片所必须的权限-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
ios相机,相册权限.在ios/项目包名/info.plist中添加
<!-- 相册 -->
<key>NSPhotoLibraryUsageDescription</key>
<string>App需要您的同意,才能访问相册</string>
<!-- 相机 -->
<key>NSCameraUsageDescription</key>
<string>App需要您的同意,才能访问相机</string>
Attributes
visible
是否可见
boxWidth
拍照框的宽度
boxHeight
拍照框的高度
textNode
拍照框中的文字节点
pictureNode
拍照框中的自定义界面节点,如:(身份证正面的人像,身份证背面的国徽)
retakeNode
重拍按钮
completeNode
完成按钮
quality
照片压缩 值为0.0到1.0
maxHeight
图像最大高度(保留原图比例)
onTakingComplete
拍照完成事件
onBackClick
返回事件
import M022 from '@dfeidao/fd-m000022';
export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
return (<View style={{ flex: 1 }}>
<M022
maxHeight={1000}
quality={0.8}
boxWidth={d('width')}
boxHeight={d('height')}
visible={d('visible')}
textNode={<Text style={{ color: '#fff', fontSize: 14, textAlign: 'center', transform: [{ rotateZ: '90deg' }] }}>请将人像面放在框内,并调整好光线</Text>}
pictureNode={<View></View>}
retakeNode={<View style={{ height: 30, width: 50, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: '#fff', fontSize: 14 }}>重拍</Text>
</View>}
completeNode={<View style={{ height: 30, width: 50, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: '#fff', fontSize: 14 }}>完成</Text>
</View>}
onTakingComplete={a('a001')}
onBackClick={a('a001')}
/>
</View>)
}
ChangeLogs
latest
添加旋转