@dfeidao/fd-m000022 NPM

拍摄证件照

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