# RNTipsView **Repository Path**: Ianhwu/RNTipsView ## Basic Information - **Project Name**: RNTipsView - **Description**: 一个基于 React Native 开发的组件,提供手写板的功能和截图的功能. - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://yansaid.github.io/2016/06/30/tipsView/ - **GVP Project**: No ## Statistics - **Stars**: 22 - **Forks**: 4 - **Created**: 2017-03-26 - **Last Updated**: 2024-12-23 ## Categories & Tags **Categories**: ios-modules **Tags**: None ## README # RNTipsView you can draw on the view, and cut an image. ![](https://github.com/MagicalYan/RNTipsView/blob/master/snapshot.gif?raw=true) # Support iOS only # Install npm i --save react-native-tipsview # Usage ## Founction: export: cut the TipsView, return the uri. clear: clear the view that you drew. ## properties: lineWidth: line width. lineColor: line color. cacheType: 0,default save image data to tmp, back tmp image file path. 1, save image to cache, back base64 string. # Example ``` import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, ImageStore } from 'react-native'; import TipsView from 'react-native-tipsview'; export default class tips extends Component { constructor(props) { super(props); this.state = { imageURI:'', }; } render() { return ( { this.state.imageURI.length > 0 ? ( ) : null } { this.refs.tipsView.clear(); this.setState({imageURI:''}); }}> {'clear'} { this.refs.tipsView.export().then(result=>{ this.setState({imageURI:result}); }, error=>{ console.warn(error); }); }}> {'cut'} ); } } const styles = StyleSheet.create({ tipsViewStyle: { flex:1, backgroundColor:'white', }, previewStyle: { position:'absolute', width: 100, height: 100, resizeMode:'contain', }, container: { flex: 1, backgroundColor: '#F5FCFF', }, text: { alignSelf: 'center', padding: 20, } }); AppRegistry.registerComponent('tips', () => tips); ```