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

玩~

相关推荐
谢尔登14 小时前
【React Native】布局和 Stack 、Slot
javascript·react native·react.js
Misha韩14 小时前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
wayne2142 天前
从零开始学习 Redux:React Native 项目中的状态管理
学习·react native·react.js
OEC小胖胖2 天前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web
henujolly2 天前
react native学习record one month
学习·react native·react.js
wayne2143 天前
跨平台移动开发技术深度分析:uni-app、React Native与Flutter的迁移成本、性能、场景与前景
react native·架构
谢尔登3 天前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
谢尔登5 天前
【React Native】样式、网络请求和Loading
网络·react native·react.js
天平6 天前
react native现代化组件库的推荐 【持续更新...】
android·前端·react native
沐言人生6 天前
RN学习笔记——1.RN环境搭建和踩坑
前端·react native