reactnative 调用原生UI组件(二),引入xml文件。

reactnative 调用原生UI组件(二),引入xml文件

介绍

react native 调用原生的UI组件,引入原生的布局文件(xml)。

第一布 新建布局文件

复制代码
<?xml version="1.0" encoding="utf-8"?>

<com.MyCustomView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:minHeight="150dp"
    android:background="#FD5C08"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"


    >

</com.MyCustomView >

第二布

复制代码
import android.content.Context;
import android.view.LayoutInflater;
import com.facebook.react.common.MapBuilder.Builder;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.gxl.express.apk.R;

import java.util.Map;

public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {

    public static final String REACT_CLASS = "RCTMyCustomView";

    @Override
    public String getName() { return REACT_CLASS; }

    @Override
    public MyCustomView createViewInstance(ThemedReactContext context) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        MyCustomView view = (MyCustomView)inflater.inflate(R.layout.custom_view, null);
        return view;
    }

    @ReactProp(name = "status")
    public void setStatus(MyCustomView view, Boolean status) {
        view.setStatus(status);
    }

    public Map getExportedCustomBubblingEventTypeConstants() {

        String eventName = "onClickEvent";
        String propName = "onClick";
        Map onClickHandler = MapBuilder.of("phasedRegistrationNames",MapBuilder.of("bubbled", propName));

        Builder events = MapBuilder.builder();
        events.put(eventName, onClickHandler);
        return events.build();

    }

}

第三布

复制代码
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.events.RCTEventEmitter;

public class MyCustomView extends RelativeLayout {

    private boolean status = false;

    public MyCustomView(Context context) {
        super(context);
    }

    public MyCustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void onFinishInflate() {
        super.onFinishInflate();

        this.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                MyCustomView.this.onClick();
            }
        });
    }

    public void setStatus(boolean status) {
        this.status = status;
        setBackgroundColor( this.status ? Color.GREEN : Color.RED);
    }

    public void onClick() {
        WritableMap event = Arguments.createMap();

        event.putString("value1","react demo");
        event.putInt("value2",1);

        ReactContext reactContext = (ReactContext)getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onClickEvent", event);
    }

}

第四布

复制代码
 @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList( new MyCustomViewManager()));

    }

第五布

复制代码
 @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
            packages.add( new TestReactPackage());

          return packages;
        }

第六布

复制代码
import React from 'react';
import { requireNativeComponent } from 'react-native';

type Props = {
  status: Boolean,
  onClick: Function
}

const RCTCustomView = requireNativeComponent('RCTMyCustomView', MyCustomView, {});

class MyCustomView extends React.PureComponent<Props> {
  _onClick = (event) => {
    if (!this.props.onClick) {
      return;
    }

    // process raw event...
    this.props.onClick(event.nativeEvent);
  }

  render() {
    return <RCTCustomView {...this.props} onClick={this._onClick}/>
  }
}

export default MyCustomView;

第七布

复制代码
import MyCustomView from './../component/MyCustomView';
render() {
<MyCustomView 
          status={this.state.status}
          onClick={(event2)=>this.onClick(event2)}
          style={{ width: "100%", height: "100%" }} 
        />

}



onClick ( event2){
    // alert("Received params: " + JSON.stringify(event))
    console.log(event2)
    this.setState({status: !this.state.status})
  }
相关推荐
Amy_cx1 天前
搭建React Native开发环境
javascript·react native·react.js
_小黑_1 天前
SQL SERVER 解析XML
xml
weixin_409383121 天前
cocos 用widget将ui组件固定在屏 随着分辨率自适应 编辑器界面canvas作为手机屏参考 将ui组件放进去 deepseek解答
ui·cocos
CodeCraft Studio1 天前
国产化Excel开发组件Spire.XLS教程:使用Python将CSV转换为XML(处理现实数据问题)
xml·python·excel·csv·spire.xls·csv转xml
Hi202402172 天前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
_pengliang2 天前
React Native 使用 react-native-credentials-manager 接入谷歌登录教程
javascript·react native·react.js
紫薯馍馍3 天前
Adobe Photoshop 2025(Ps2025)下载安装教程
ui·adobe·photoshop
兰亭妙微3 天前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势
摘星编程3 天前
【参赛心得】HarmonyOS创新赛获奖秘籍:如何用Stage模型和声明式UI打造高分作品
ui·华为·harmonyos·鸿蒙开发·stage模型
诚实可靠王大锤4 天前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节