react native引用原生组件时无法显示的问题处理

最近有个需求,要在react native中嵌入一个原生的视频组件,同事嵌入后发现有问题:

  1. 内容无法显示

https://musicfe.com/rn-android-webview

参考这个方法,在嵌入之后调用一下。

java 复制代码
public void manuallyLayoutChildren(View view) {
    int width = view.getMeasuredWidth();
    int height = view.getMeasuredHeight();
    view.measure(
            View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
            View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
    view.layout(0, 0, width, height);
}
  1. 内容动态变化时的高宽不对,以及原生的edittext输入框无法删除

看了一下,是因为内容变化的时候,一是requestLayout没有正常执行;二是上面云音乐给的代码中,没有触发子view的重绘,所以子view的布局失效了。处理方法

java 复制代码
@Override
public void requestLayout() {
    super.requestLayout();
    CustomView.this.post(() -> {
        if (ViewCompat.isAttachedToWindow(CustomView.this)) {
            layoutViews(CustomView.this);
        }
    });
}

public void layoutViews(View view) {
    int width = view.getMeasuredWidth();
    int height = view.getMeasuredHeight();
    view.measure(View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
    view.layout(0, 0, width, height);
    view.invalidate();
}

玩~

相关推荐
朝阳3913 小时前
ReactNative【实战系列教程】我的小红书 6 -- 购物(含商品搜索、商品分类、商品列表)
react native
Misha韩21 小时前
React Native 基础组件详解<二>
react native·组件
朝阳392 天前
ReactNative【实战】瀑布流布局列表(含图片自适应、点亮红心动画)
react native
_一两风3 天前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js
Misha韩4 天前
React Native 初始化项目和模拟器运行
react native
Misha韩5 天前
React Native 亲切的组件们(函数式组件/class组件)和陌生的样式
react native·函数式组件·class组件
1234Wu5 天前
React Native 接入 eCharts
javascript·react native·react.js
wen's6 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
朝阳397 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin7 天前
【React Native】自定义倒计时组件CountdownView
react native