react-native - Expo Signature - Crash onChange 内容

Question

我写了这段代码来获取一个人的签名：

import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { Platform, AppState, StyleSheet, Text, View } from 'react-native';

const isAndroid = Platform.OS === 'android';
function uuidv4() {
  // https://stackoverflow.com/a/2117523/4047926
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

export default class App extends Component {

  state = {
    signature: null,
    appState: AppState.currentState,
  };

  handleAppStateChangeAsync = nextAppState => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      if (isAndroid && this.sketch) {
        this.setState({ appState: nextAppState, id: uuidv4(), lines: this.sketch.lines });
        return;
      }
    }
    this.setState({ appState: nextAppState });
  };

  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChangeAsync);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChangeAsync);
  }

  onChange = async () => {
    const { uri } = await this.sketch.takeSnapshotAsync();

    this.setState({
      signature: { uri },
    }, () => console.log(this.state.signature));
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>

        <View style={{flex: 1, left: '5%'}}>
          <ExpoPixi.Signature
            ref={signature => (this.sketch = signature)}
            style={styles.pad}
            strokeColor={'black'}
            strokeAlpha={0.5}
            onChange={this.onChange}
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  pad: {
    flex: 1,
    width: '90%',
    borderWidth: 0.6,
    borderColor: '#b3b3b5',
    borderRadius: 10,
    backgroundColor: 'white'
  },
});

运行这个受这个库示例启发的简单代码，我注意到borderRadius被忽略（View缺少角），当我尝试编写签名时应用程序崩溃。

附注：是否可以获得 pad 内容的 base64 编码版本而不是 uri？

标签： react-nativeexpopixi.jssignaturepad