React Native 签名 拍照

签名： 1.首先安装安装插件

                    npm i react-native-signature
                   官网地址：react-native-signature-capture - npm

    2.安装完毕之后 可以在页面调用  以下是签名组件

import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
/**
 * 标准start
 */
import BackPressComponent from '../../component/BackPressComponent';
import SafeAreaViewPlus from '../../component/SafeAreaViewPlus';
import NavigationUtil from '../../component/NavigationUtil';
import ViewUtil from '../../component/ViewUtil';
import NavigationBar from '../../component/NavigationBar';
import ThemeFactory, { ThemeFlags } from '../../res/style/ThemeFactory';
 
/**
 * 标准end
 */
// 签名组件
import SignatureCapture from 'react-native-signature-capture';
export default class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.appColor = ThemeFactory.createTheme();
        // 初始状态
        const title = '签字';
        this.state = {
            title: title,
            version: '',
            isVisible: false
        };
 
        this.backPress = new BackPressComponent({ backPress: () => this.onBackPress() });
    }
    componentDidMount() {
        this.backPress.componentDidMount();
    }
    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    onBackPress() {
        //安卓屋里返回键
        this.onBack();
        return true;
    }
    onBack() {
        //返回上一页
        NavigationUtil.goBack();
    }
    open() { }
 
    saveSign() {
        this.refs['sign'].saveImage();
    }
 
    resetSign() {
        this.refs['sign'].resetImage();
    }
 
    _onSaveEvent(result) {
        // 判断签字是否为空  4AAYYOAAGGDgABhg字段为签字图片为空所含字段
        if (result.encoded.includes('4AAYYOAAGGDgABhg')) { 
            this.refs.Toast.show('未签字');
 
        } else {
            // 调用路由方法  返回上一层  把签字参数传递到上层页面
            this.props.route.params.callBack(result);
            NavigationUtil.goBack();
        }
 
 
    }
    _onDragEvent(e) {
    }
    render() {
        const titleLayoutStyle = this.state.title.length > 20 ? { paddingRight: 30 } : null;
        let navigationBar = (
            <NavigationBar
                leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
                titleLayoutStyle={titleLayoutStyle}
                title={this.state.title}
                style={this.appColor.styles.navBar}
                statusBar={this.appColor.styles.navBar}
            />
        );
 
        return (
            <SafeAreaViewPlus topColor={this.appColor.themeColor}>
                {navigationBar}
                <View style={styles.container}>
                    {/* 签字 */}
                    <SignatureCapture
                        style={[{ flex: 1, margin: 20 }, styles.signature]}
                        ref="sign"
                        onSaveEvent={this._onSaveEvent.bind(this)}
                        onDragEvent={this._onDragEvent.bind(this)}
                        saveImageFileInExtStorage={false}
                        minStrokeWidth={1}
                        strokeColor="#3c96f0"
                        showNativeButtons={false}
                        showTitleLabel={true}
                        backgroundColor={'#FFFFFF'}
                        viewMode={'portrait'}
                    />
                    <View style={{ justifyContent: 'center', alignItems: 'center', paddingTop: 30, paddingBottom: 30 }}>
                        <Text style={{ fontSize: 18, fontWeight: '800' }}>请使用楷书在框内签字并上传</Text>
                    </View>
                    <View style={{ flex: 1, flexDirection: 'row' }}>
                        <TouchableOpacity
                            style={[{ borderWidth: 1, borderColor: "#77B4F3" }, styles.buttonStyle]}
                            activeOpacity={0.8}
                            onPress={() => {
                                this.resetSign();
                            }}
                        >
                            <Text>重置</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={[{ backgroundColor: "#77B4F3" }, styles.buttonStyle]}
                            onPress={() => {
                                this.saveSign();
                            }}
                        >
                            <Text style={{ color: "#fff" }}>确认</Text>
                        </TouchableOpacity>
                    </View>
                    {/* 提示框 */}
                    <Toast ref="Toast" position="bottom" positionValue={200} fadeInDuration={750} fadeOutDuration={1000} opacity={0.8} />
                </View>
            </SafeAreaViewPlus>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#CCC'
    },
    signature: {
        flex: 1,
        borderColor: 'red',
        borderWidth: 1
    },
    buttonStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 50,
        margin: 10
    }
});

附上效果图：

签字完毕后点击确认 返回上级层面 并且接收签字照片

    head() {
        // 跳转签字页面  并且携带函数                      // 签字页面
        NavigationUtil.goPage({ callBack: this.goHome }, 'MyComponent');
    }
    // 设置签字
    goHome = (result) => {
        // result  签字页面穿传回参数
        // result.encoded 为base64格式 直接使用需要 `data:image/png;base64,${值}` }}
        // result.uri     为本地储存路径 可直接使用
        const signatureImage = result.encoded;
        this.setState({
            signatureImage,
        });
    }
 
 
 
// 下方页面使用
    base64格式时
        <Image
            source={{ uri: `data:image/png;base64,${signatureImage}` }}
            style={{ flex: 1, width: '100%', height: '100%', backgroundColor: "#fff" }}
        />
    uri格式时    
        <Image source={{ uri: signatureImage}} style={{ width: '100%', height: '100%' }} />

拍照： 1.安装插件 npm i react-native-image-picker 官网地址：react-native-image-picker - npm * 插件版本需要看好 新旧版本不同 我的引入方式是第二种

// 旧版本       
import ImagePicker from 'react-native-image-picker';
// 新版本 
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

2.安装完毕之后 直接在页面内使用

    Camera = () => {
        const options = {
                storageOptions: {
                    skipBackup: true,
                    path: 'images'
                },
                includeBase64: true,// 是否为base64格式
                quality: 0.4// 图片清晰度 0-1
                };
                // launchCamera  打开相机   
                // launchImageLibrary打开相册
                launchCamera(options, (response) => {
                    if (response.didCancel) {
                        console.log('用户取消了拍照');
                    } else if (response.error) {
                        console.log('拍照时发生错误:', response.error);
                    } else {
                        // response 照片参数
                        // 进行操作

                }
            });
    }

可以直接根据返回参数渲染图片  渲染方式跟签名相同