reactnative 调用原生ui组件
![组件对应关系](https://img-blog.csdnimg.cn/direct/c4351ad7bd38411e9c13087f1059a4b0.png)
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> {
@Override
public String getName() {
return "MyTextView";
}
@Override
protected 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 {
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new OpenNativeModule(reactContext));
return modules;
}
@Override
public 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());
}
}
第三步 将桥接文件引入
@Override
protected 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';
<MyCustomText
style={{ width: 100, height: 100 }}
text="00000"
textSize={12}
>
</MyCustomText>