ReactNative开发之在原生页面调用rn控件

在使用rn开发时，笔者遇到过这样一个需求：已有的原生页面，需要进行改版，而这个改版比较小，只是加一个ImageView，因为部门有ios的同事，而且当时已经用了rn这门技术。因此，希望这个ImageView用rn来实现。那么，我们如何在一个纯原生的页面中调用rn控件呢？
前面几篇文章，我们都是在一个rn的页面中使用rn的控件。这次，笔者就带大家来实现这个功能——在原生页面中调用rn控件。

思路很简单：我们在原生新建一个ViewGroup，用这个ViewGroup在承载rn的控件就行了。
首先，我们新建一个纯原生的页面

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".SecondActivity"tools:ignore="MissingDefaultResource"><FrameLayoutandroid:id="@+id/frameLayout"android:layout_width="match_parent"android:layout_height="match_parent"/></androidx.constraintlayout.widget.ConstraintLayout>

然后，我们新建一个类来封装相关的rn逻辑：

package com.example.demo;import android.app.Activity;
import android.os.Bundle;
import android.util.Log;import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;/*** Created by brett.li* on 2022/10/26*/
public class RNView {private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;private Activity activity;private Bundle bundle;public RNView(Activity activity){this.activity = activity;this.init();}public ReactRootView getContant() {return mReactRootView;}private void init(){try {mReactRootView = new ReactRootView(this.activity);mReactInstanceManager = ((ReactApplication)this.activity.getApplicationContext()).getReactNativeHost().getReactInstanceManager();bundle = new Bundle();//作为rn控件的属性bundle.putString("test","test");mReactRootView.startReactApplication(mReactInstanceManager,"MyReactNativeApp",bundle);}catch (Exception exception){Log.e("RNView","error");}}
}

最后，在原生页面中调用即可

package com.example.demo;import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;public class SecondActivity extends BaseActivity {private FrameLayout frameLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_second);frameLayout = findViewById(R.id.frameLayout);RNView rnView = new RNView(this);frameLayout.addView(rnView.getContant());}
}

rn端代码：

import React from "react";
import {DeviceEventEmitter,NativeEventEmitter,NativeModules,Platform,requireNativeComponent,StyleSheet,Text, ToastAndroid,TouchableOpacity,View
} from "react-native";const RCTTextView  = (Platform.OS === 'android') ? requireNativeComponent('RCTTextView') : null;
const NWebview  = (Platform.OS === 'android') ? requireNativeComponent('WebView') : null;const styles = StyleSheet.create({container: {// flex: 1,justifyContent: 'center',alignItems:'center'},hello: {fontSize: 20,textAlign: 'center',margin: 10}
});interface Props{test:string
}interface State{test:string
}export class HelloWorld extends React.Component<Props,State> {constructor(props:Props) {super(props);this.state={test:props.test}ToastAndroid.show("test is "+this.props.test,ToastAndroid.SHORT)}render() {return (<View style={styles.container}><Text style={styles.hello}>{this.state.test}</Text></View>);}
}//index.js
AppRegistry.registerComponent('MyReactNativeApp',() => HelloWorld
);

ReactNative开发之在原生页面调用rn控件相关推荐

在C#开发WPF桌面应用程序调用OCX控件
公司需要开发开发C#的WPF桌面应用程序演示软件,该软件调用高拍仪设备使用的的两个x86版本的OCX组件用于显示和控制高拍仪设备. 一.开发环境: 操作系统: Windows 10 企业版操作系统开 ...
公司--页面调用日期控件 WdatePicker日历控件使用方法
<td style="width:120px;"><input type="text" name="lpd_<%=prodTa ...
SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
COM组件开发实践（八）---多线程ActiveX控件和自动调整ActiveX控件大小(下)
源代码下载:MyActiveX20081229.rar 声明:本文代码基于CodeProject的文章<A Complete ActiveX Web Control Tutorial>修改 ...
Javascript调用OCX控件
什么是ocx控件? 对象链接和嵌入用户控件(OCX)是一种可以由在微软的Windows系统中运行的应用软件创建使用的特殊用途的程序. 想知道究竟的可以看看这个帖子. http://www.tososo ...
.net组件开发系列之武术系列武术招数控件生命周期与控件事件机制
.net组件开发系列之武术系列武术招数控件生命周期与控件事件机制一.控件生命周期先回述上篇,可能表述没有不清晰,也可能跨度大了点,好的,我们来一个循序渐进过程,大家都知道,武术都有招术的,先出什 ...
javascript调用activex控件
代码 <HTML> <BODY> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000&quo ...
关于页面动态添加控件(转)
最近看到很多问题都是关于页面动态添加控件,页面postback以后,就取不到这些控件了.其实每次在页面上动态添加控件(或者在数据控件上动态添加列),它们的状态是不会被添加到页面的ViewState中去 ...
html 调用c#dll中的控件,C#调用ActiveX控件的方法
C#调用ActiveX控件时通常要进行两步操作: 第一步:注册控件,例如ABE.DLL,将ABE.DLL拷贝至系统文件夹SYSTEM32下,然后在开始中执行CMD命令,regsvr32 ABE.DLL ...

ReactNative开发之在原生页面调用rn控件

ReactNative开发之在原生页面调用rn控件相关推荐

最新文章

热门文章