reactnative 调用原生ui组件
reactnative 调用原生ui组件
1.该样例已textView，介绍。
新建MyTextViewManager 文件，继承SimpleViewManager。import android.graphics.Color;
import android.widget.TextView;import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;public class MyTextViewManager extends SimpleViewManager<TextView> {@Overridepublic String getName() {return "MyTextView";}@Overrideprotected TextView createViewInstance(ThemedReactContext reactContext) {TextView textView = new TextView(reactContext);return textView;}@ReactProp(name="text")public void setText(TextView view,String text){view.setText(text);}@ReactProp(name="textSize")public void setTextSize(TextView view,float fontSize){view.setTextSize(fontSize);}@ReactProp(name="textColor",defaultInt = Color.BLACK)public void setTextColor(TextView view,int textColor){view.setTextColor(textColor);}@ReactProp(name="isAlpha",defaultBoolean = false)public void setTextAlpha(TextView view,boolean isAlpha){if(isAlpha){view.setAlpha(0.5f);}else{}}
}
第二部 桥接文件
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.gxl.express.apk.ui.CameraPreviewViewManager;
import com.gxl.express.apk.ui.MyCustomViewManager;
import com.gxl.express.apk.ui.MyTextViewManager;
import com.gxl.express.apk.ui.VideoViewManager;
import com.gxl.express.apk.ui.cameraViewManager;import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;public class TestReactPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new OpenNativeModule(reactContext));return modules;}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
// return Collections.emptyList();
// return Arrays.<ViewManager>asList(new cameraViewManager(reactContext),new MyTextViewManager(),new CameraPreviewViewManager(),new VideoViewManager());return Arrays.<ViewManager>asList( new MyCustomViewManager(),new cameraViewManager(),new MyTextViewManager());}
}
第三步 将桥接文件引入
@Overrideprotected List<ReactPackage> getPackages() {@SuppressWarnings("UnnecessaryLocalVariable")List<ReactPackage> packages = new PackageList(this).getPackages();// Packages that cannot be autolinked yet can be added manually here, for example:// packages.add(new MyReactNativePackage());
// packages.add(new MainReactPackage());packages.add( new TestReactPackage()); // 将桥接文件引入return packages;}
第四步 在react native 项目中引入。
import React from 'react';
import { requireNativeComponent } from 'react-native';type Props = {text: String,textSize: Number,textColor:Number,isAlpha:Boolean
}const MyTextView = requireNativeComponent('MyTextView', MyCustomText, {});class MyCustomText extends React.PureComponent<Props> {render() {return <MyTextView {...this.props} />}
}export default MyCustomText;
第5走 引入组件使用
import MyCustomText from './../component/Mytext';<MyCustomTextstyle={{ width: 100, height: 100 }} text="00000"textSize={12}></MyCustomText>