React Native：如何从模块调用原生 Android 布局？

Question

关于 this question，我一直在尝试通过 Android 中的本机模块来完成此操作。

我已经按照 React Native ToastModule 中的示例在 .../java/com/myproject/multiplecamerastream 中声明了我的模块（此处的功能并不重要）：

public class MultipleCameraStreamModule extends ReactContextBaseJavaModule {

  private static final String CAMERA_FRONT = "SHORT";
  private static final String CAMERA_BACK = "LONG";

  public MultipleCameraStreamModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MultipleCameraStream";
  }

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(CAMERA_FRONT, Toast.LENGTH_SHORT);
    constants.put(CAMERA_BACK, Toast.LENGTH_LONG);
    return constants;
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

然后，我的模块打包器：

public class MultipleCameraStreamPackage implements ReactPackage { 

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new MultipleCameraStreamModule(reactContext));
    return modules;
  }
}

我已经能够注册它并让它工作。但是，它只调用 Android 中的 Toast（不涉及布局）。

我想设置布局，所以当我在 JSX 中调用 <MultipleCameraStream /> 时，它会呈现原生 Android 布局，如下所示：

/* .../multiplecamerastream/MultipleCameraStreamLayout.xml */
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
>
    <TextView android:id="@+id/multipleCameraText"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" 
    />
    <Button android:id="@+id/multipleCameraButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" 
    />
</LinearLayout>

如何使布局从我的模块脚本 (MultipleCameraStreamModule) 调用，以及如何引用其元素 这样我就可以从 Android 模块端 以编程方式与他们互动？

谢谢。

Answer 1

RN Native UI 网站本身有解释，但我也迷路了。 :(

但是，如果需要改进，请告诉我：

1) 创建一个可以使您的 xml MultipleCameraStreamLayout.xml 膨胀的视图。理想情况下，此 CustomView 可用于 Android 纯代码。

public class CustomView extends LinearLayout {
 private Context context;
 public CustomView(Context context) {
   super(context);//ADD THIS
   this.context = context;
 }
 ..
 public void init() {
   //modified here.
    inflate(context, R.layout.xxxxxxxxx, this);
  ...

2) 设置后，将其放入另一个扩展 SimpleViewManager 的 class(View Manager) 中。示例：

public class MyCustomReactViewManager extends SimpleViewManager<CustomView> {
   public static final String REACT_CLASS = "MyCustomReactViewManager";

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

   @Override
   public CustomView createViewInstance(ThemedReactContext context) {
     return new CustomView(context); //If your customview has more constructor parameters pass it from here.
   }

3) 现在将其添加到React包的createViewManager方法中，您已经在MultipleCameraStreamPackage中创建了它。所以，它将是：

@Override
public List<ViewManager> createViewManagers(
        ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
            new MyCustomReactViewManager() //Add here.
    );
}

4) 您现在可以使用 Android 代码，方法是重新安装它

react-native run-android

5) 在javascript中公开它。创建一些文件 CustomView.js

import {requireNativeComponent, ViewPropTypes} from 'react-native';
//
module.exports = requireNativeComponent('MyCustomReactViewManager', null); //Add props are bit different.

6) 开始在您的视图中使用它。例如

import CustomView from './CustomView.js';
...
render() {
 return 
  ...
  <CustomView style={{height:200, width:200}}/>
  ...;
}

希望这对您有所帮助。

如果您需要代码示例，已上传 here。

React Native：如何从模块调用原生 Android 布局？

React Native: How to invoke native Android layout from module?

java

android

react-native

native-module

react-native-native-module