我创建了一个CustomView SignatureView.java,它扩展了LinearLayout以捕获Android Native中的签名.
@H_403_26@并创建了SignatureCapturePackage.java和SignatureCaptureViewManager.java
public class SignatureCaptureMainView extends LinearLayout { .... public void saveImage(){ //Save image to file } }
这个Package类
public class SignatureCapturePackage implements ReactPackage { private Activity mCurrentActivity; public RSSignatureCapturePackage(Activity activity) { mCurrentActivity = activity; } @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) { return Arrays.<ViewManager>asList(new SignatureCaptureViewManager(mCurrentActivity)); } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Arrays.asList(); } }
这是ViewManager类
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 RSSignatureCaptureViewManager(Activity activity) { mCurrentActivity = activity; } @Override public 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); } } @Override public SignatureCaptureMainView createViewInstance(ThemedReactContext context) { Log.d("React"," View manager createViewInstance:"); return new SignatureCaptureMainView(context,mCurrentActivity); } }
这是Signature.js包
var React = require('react-native'); var { PropTypes,requireNativeComponent,View,} = React; 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,encoded: event.nativeEvent.encoded,}); } render() { return ( <SignatureView {...this.props} style={{flex: 1}} onChange={this.onChange} /> ); } save(){ } } SignatureCapture.propTypes = { ...View.propTypes,saveImageFileInExtStorage: PropTypes.bool,viewmode:PropTypes.string }; var SignatureView = requireNativeComponent('SignatureView',SignatureCapture,{ nativeOnly: {onChange: true} }); module.exports = SignatureCapture;
我在这里使用ReactNative中的Module
<SignatureCapture onSaveEvent={this._onSaveEvent} saveImageFileInExtStorage={false} viewmode={"portrait"}/>
一切都很有效.但是我必须在反应方面发生一些点击事件时才保存图像.即,我必须从reactnative js代码调用SignatureCaptureMainView的saveImage()方法.
我怎样才能实现它?.请帮助