reactnative 调用原生ui组件

本文详细介绍了如何在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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值