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

玩~

相关推荐
诚实可靠王大锤19 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
三思而后行,慎承诺3 天前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
木西5 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(永续合约交易-前端部分)
react native·web3·智能合约
歪歪1005 天前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
带娃的IT创业者5 天前
《AI大模型应知应会100篇》第68篇:移动应用中的大模型功能开发 —— 用 React Native 打造你的语音笔记摘要 App
人工智能·笔记·react native
sylvia_08155 天前
react native 初次使用Android Studio 打包
android·react native·android studio
索马里亚纳海参炒贩6 天前
useCallback useMemo memo 三个区别和作用
前端·react native
冰冷的bin7 天前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
懒人村杂货铺7 天前
[特殊字符] 跨端视频通话实战:腾讯云 TRTC + IM(React Native & Web)
react native·音视频·腾讯云