reactnative 调用原生ui组件

原创已于 2024-02-01 09:12:14 修改 · 973 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#react native #ui #react.js

于 2024-02-01 09:10:26 首次发布

本文详细介绍了如何在ReactNative项目中创建并使用自定义的MyTextView组件，通过继承SimpleViewManager实现与原生UI交互，并在Bridge中注册。步骤包括创建文件、桥接文件配置和组件导入使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>