按照@agent_hunt给定的指针。
检查此博客进行解释
我在SignatureCaptureViewManager中使用了ui管理器命令。发布我的解决方案
public class SignatureCaptureViewManager extends ViewGroupManager<SignatureCaptureMainView> {private Activity mCurrentActivity;public static final String PROPS_SAVE_IMAGE_FILE="saveImageFileInExtStorage";public static final String PROPS_VIEW_MODE = "viewMode";public static final int COMMAND_SAVE_IMAGE = 1;public SignatureCaptureViewManager(Activity activity) { mCurrentActivity = activity;}@Overridepublic String getName() { return "SignatureView";}@ReactProp(name = PROPS_SAVE_IMAGE_FILE)public void setSaveImageFileInExtStorage(SignatureCaptureMainView view, @Nullable Boolean saveFile) { Log.d("React View manager setSaveFileInExtStorage:", "" + saveFile); if(view!=null){ view.setSaveFileInExtStorage(saveFile); }}@ReactProp(name = PROPS_VIEW_MODE)public void setViewMode(SignatureCaptureMainView view, @Nullable String viewMode) { Log.d("React View manager setViewMode:", "" + viewMode); if(view!=null){ view.setViewMode(viewMode); }}@Overridepublic SignatureCaptureMainView createViewInstance(ThemedReactContext context) { Log.d("React"," View manager createViewInstance:"); return new SignatureCaptureMainView(context, mCurrentActivity);}@Overridepublic Map<String,Integer> getCommandsMap() { Log.d("React"," View manager getCommandsMap:"); return MapBuilder.of( "saveImage", COMMAND_SAVE_IMAGE);}@Overridepublic void receiveCommand( SignatureCaptureMainView view, int commandType, @Nullable ReadableArray args) { Assertions.assertNotNull(view); Assertions.assertNotNull(args); switch (commandType) { case COMMAND_SAVE_IMAGE: { view.saveImage(); return; } default: throw new IllegalArgumentException(String.format( "Unsupported command %d received by %s.", commandType, getClass().getSimpleName())); }}}为了向ViewManager发送命令，我在Signature Capture组件中添加了此方法
class SignatureCapture extends React.Component {constructor() {super();this.onChange = this.onChange.bind(this);}onChange(event) {console.log("Signature ON Change Event");if (!this.props.onSaveEvent) { return;}this.props.onSaveEvent({ pathName: event.nativeEvent.pathName, enpred: event.nativeEvent.enpred,}); } render() { return ( <SignatureView {...this.props} style={{flex: 1}} onChange= {this.onChange} />); }saveImage(){ UIManager.dispatchViewManagerCommand( React.findNodeHandle(this), UIManager.SignatureView.Commands.saveImage, [], ); } }SignatureCapture.propTypes = {...View.propTypes,rotateClockwise: PropTypes.bool,square:PropTypes.bool,saveImageFileInExtStorage: PropTypes.bool,viewMode:PropTypes.string}; var SignatureView = requireNativeComponent('SignatureView', SignatureCapture, { nativeOnly: {onChange: true} }); module.exports = SignatureCapture;这就是我在父级Signature组件中使用SignatureCapture组件的方式
class Signature extends Component {render() { return ( <View style={{ flex: 1, flexDirection: "column" }}> <SignatureCapture style={{ flex: 8 }} ref="sign", onSaveEvent={this._onSaveEvent} saveImageFileInExtStorage={false} viewMode={"portrait"}/> <TouchableHighlight style={{ flex: 2 }} onPress={() => { this.saveSign() } } > <Text>Save</Text> </TouchableHighlight> </View> );}// Calls Save method of native view and triggers onSaveEvent callbacksaveSign() { this.refs["sign"].saveImage(); }_onSaveEvent(result) { //result.enpred - for the base64 enpred png //result.pathName - for the file path name console.log(result); } } export default Signature;
