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

在原生页面中调用React Native组件需要使用React Native的WebView组件来加载一个包含React Native控件的HTML页面。以下是一个基本的步骤和示例代码：

创建一个React Native项目并编写你的自定义组件。
将你的React Native应用打包成一个bundle文件。
在你的原生项目中添加一个WebView并加载指向该bundle文件的URL。

步骤 1: 编写React Native组件 MyComponent.js




import React from 'react';
import { Text, View, Button } from 'react-native';
 
export default function MyComponent() {
  return (
    <View>
      <Text>Hello from React Native!</Text>
      <Button title="Click Me" onPress={() => alert('Button clicked!')} />
    </View>
  );
}

步骤 2: 打包React Native应用




cd /path/to/your/react-native-project
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

步骤 3: 在原生Android项目中的布局文件中添加WebView




<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

步骤 4: 在原生Activity或Fragment中设置WebView




WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
 
// 加载包含React Native控件的HTML页面
// 确保HTML页面中引用了正确的bundle文件
webView.loadUrl("file:///android_asset/your_html_page.html");

HTML页面 (your_html_page.html ):




<!DOCTYPE html>
<html>
  <head>
    <title>React Native in WebView</title>
    <script src="index.android.bundle"></script>
  </head>
  <body>
    <div id="react-root"></div>
    <script type="text/javascript">
      // 初始化React Native运行时并渲染MyComponent
      ReactNative.AppRegistry.registerComponent('MyApp', () => MyComponent);
      var app = ReactNative.AppRegistry.runApplication('MyApp', {
        rootTag: document.getElementById('react-root')
      });
    </script>
  </body>
</html>

确保你的React Native项目有适当的bundle生成命令和正确的bundle文件路径。这个例子是针对Android的，对于iOS，步骤类似，但文件路径会有所不同。

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

评论已关闭

推荐阅读