React Native Signature Component 기반 WebView Canvas
반응 네이티브 서명 캔버스
React Native Signature Component 기반 Canvas for Android && IOS && 엑스포
- Android 및 iOS 및 Expo 지원
- 기본 종속성이 없는 순수한 JavaScript 구현
- RN 0.50으로 테스트
- 핵심 사용 서명_패드.js
- 반응에만 의존하고 네이티브 반응
- base64로 인코딩된 .png'>npm install --save react-native-signature-canvas를 생성합니다.
설치(React Native V0.5x.x 또는 Expo SDK용
npm install --save react-native-signature-canvas@1.4.2용법
import Signature from 'react-native-signature-canvas';속성
소품 유형 설명 설명텍스트 string서명에 대한 설명 텍스트 명확한 문구 string버튼 텍스트 지우기 확인 텍스트 string버튼 텍스트 저장 웹스타일 string기본 스타일 덮어쓰기를 위한 webview 스타일, 모든 스타일: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css 확인 function저장 버튼을 클릭하면 처리 기능 하나 비어 function저장 버튼 클릭 시 빈 서명 기능 처리 온클리어 function지우기 버튼을 클릭하면 기능 처리 시작하다 function새로운 스트로크가 시작될 때 핸들 기능 온엔드 function스트로크가 끝났을 때 핸들 기능 사용자 정의 HTML function레이아웃이나 요소와 같은 것을 수정할 수 있는 html 문자열입니다. 자동 지우기 boolean확인 버튼을 클릭하면 서명이 자동으로 지워집니다. 이미지 유형 string기본값은 , image.jpeg'>dataURL입니다. string기본값은 , Base64 문자열, 데이터 URL에서 서명 이미지를 그립니다. 행동 양식
기능 설명 서명 읽기() 캔버스에서 현재 서명을 읽고 onOK 또는 onEmpty 콜백을 트리거합니다. 지우기 서명() 현재 서명을 지웁니다. 다음과 같이 ref를 사용해야 합니다.
import SignatureScreen from 'react-native-signature-canvas'; const Sign = ({text, onOK}) => { const ref = useRef(); const handleSignature = signature => { console.log(signature); onOK(signature); }; const handleEmpty = () => { console.log('Empty'); } const handleClear = () => { console.log('clear success!'); } const handleEnd = () => { ref.current.readSignature(); } return ( ); } export default Sign;Base64 이미지를 파일로 저장
엑스포를 사용하면 다음을 사용할 수 있습니다. 엑스포 파일 시스템 base64 이미지를 로컬 파일로 저장하려면 react-native-cli를 사용하는 경우 다음을 사용하십시오. 반응 네이티브 fs .
import * as FileSystem from 'expo-file-system'; const handleSignature = signature => { const path = FileSystem.cacheDirectory + 'sign.png'> console.log(img)} onEmpty={() => console.log('empty')} // description text for signature descriptionText='Sign' // clear button text clearText='Clear' // save button text confirmText='Save' // String, webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css webStyle={`.m-signature-pad--footer .button { background-color: red; color: #FFF; }` } autoClear={true} imageType={'image/svg+xml'} />readSignature 및/또는 clearSignature에 대한 고유한 트리거를 생성하면 CSS 스타일이 전달된 내장 지우기 및 저장 버튼을 숨길 수 있습니다. 웹스타일 재산.
const webStyle = `.m-signature-pad--footer .save { display: none; } .clear { display: none; } `; ...예시
- 기계적 인조 인간
- iOS
import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; import Signature from 'react-native-signature-canvas'; export const SignatureScreen = () => { const [signature, setSign] = useState(null); const handleSignature = signature => { console.log(signature); setSign(signature); }; const handleEmpty = () => { console.log('Empty'); } const style = `.m-signature-pad--footer .button { background-color: red; color: #FFF; }`; return ( {this.state.signature ? ( ) : null} ); } const styles = StyleSheet.create({ preview: { width: 335, height: 114, backgroundColor: '#F8F8F8', justifyContent: 'center', alignItems: 'center', marginTop: 15 }, previewText: { color: '#FFF', fontSize: 14, height: 40, lineHeight: 40, paddingLeft: 10, paddingRight: 10, backgroundColor: '#69B2FF', width: 120, textAlign: 'center', marginTop: 10 } });다운로드 세부 정보:
작가: YanYuanFE
깃허브: https://github.com/YanYuanFE/react-native-signature-canvas
#react-native #react #모바일 앱
학생들을 위한 자바스크립트 프로젝트