0.1.20 can't work on android about react-native-canvas

[lsdiao]

sorry，my English is terrible。Unconsciously, I found that this component（react-native-signature-capture） was exactly what I wanted to do。so，i solve it

[lsdiao]

this is my code, I want wirte a Handwriting board， user write his name and I send to java as image

import React, { Component } from 'react'
import {
  Text,
  View,
  TouchableOpacity,
  DeviceEventEmitter,
  PanResponder
} from 'react-native'
import Canvas, { Image as CanvasImage }from 'react-native-canvas'
import { List, Button } from 'antd-mobile'
import RNFetchBlob from 'react-native-fetch-blob'
import styles from '../../style/PurReceive/QualityControl'
import HeaderTwo from '../HeaderTwo'
import config from '../../utils/config'
import Jfetch from '../../utils/Jfetch'

const Item = List.Item

class SignCanvas extends Component {

  componentWillMount() {
    this._panResponder = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！

        // gestureState.{x,y}0 现在会被设置为0
      },
      onPanResponderMove: (evt, gestureState) => {
        const canvas = this.refs.canvas
        const ctx = canvas.getContext('2d')
        ctx.fillStyle = 'purple'
        ctx.fillRect(gestureState.moveX, gestureState.moveY - 50, 6, 6)
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
        // 一般来说这意味着一个手势操作已经成功完成。
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true
      },
    })
  }
  componentDidMount() {
    this.refs.canvas.height = 400
  }
  d = async () => {
    const canvas = this.refs.canvas
    const data = await canvas.toDataURL()
    return data
  }
  sign() {

    // DeviceEventEmitter.emit('signUrl', 'customSign\\20171113\\upfile-20171113102921104.png')
    // const { navigator } = this.props
    // if(navigator){
    //     navigator.pop()
    // }


    this.d().then(b64=>{
      RNFetchBlob.fetch('POST', `${config.apiUrl}/InvStockTake/customSign`, {
            // 上传图片要设置Header
            'Content-Type' : 'application/octet-stream;BASE64',
        }, [
          { name: 'upfile', filename: 'upfile.png', data: b64.split(',')[1] },
        ])
        .then((response)=> response.json())
        .then((response)=> {
          DeviceEventEmitter.emit('signUrl', response)
          const { navigator } = this.props
          if(navigator){
              navigator.pop()
          }
        })
        .catch((error)=>{
            // 错误信息
            console.log(error)
        })
    })

  }

  render() {
    return (<View>
          <HeaderTwo title='客户签字' navigator={this.props.navigator} />
          <View style={{height: 400}} {...this._panResponder.panHandlers}>
              <List className="my-list">
                  <Item>
                  <Canvas ref="canvas" style={{height: 400}} />
                </Item>
                
              </List>
          </View>
          <List className="my-list">
          <Item extra={<Button type="primary" size="small" style={{height: 30, width: 100}} onPressIn={this.sign.bind(this)} >确认</Button>} />
          </List>
          </View>)
  }
}

export default SignCanvas

[lsdiao]

Accidentally turned off

[iddan]

Hey there @lsdiao thank you for trying react-native-canvas and opening this issue. I find a difficulty to understand what is the problem you're facing. Can you please describe what happens when you run the code in different words?