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();
}

玩~

相关推荐
千码君201617 小时前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
namehu19 小时前
React Native 应用性能分析与优化不完全指南
android·react native·ios
全栈探索者19 小时前
ReactNative开发实战——ReactNative 开发中的图标管理方案:基于 Iconfont 的自定义图标库实现
react native
手机不死我是天子1 天前
【碎片八股文 #001】为什么 React Native 要用 Bridge 通信?
react native
小妖怪的夏天2 天前
react native android设置邮箱,进行邮件发送
android·spring boot·react native
千码君20162 天前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
KenXu3 天前
React Conf 2025: React Native 新架构与生态详解
react native
千码君20163 天前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
ps_xiaowang7 天前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js