Google IMA webview 在 android 上的 React Native 中使用时不显示

Question

简而言之：我们在 android 上使用 reacte native，并使用 VideoView 原生 VideoView 通过 Google IMA SDK 为 android 展示带广告的视频。视频播放，广告播放，但包含 "read more" 和 "skip ad" 的 Webview 不可见。它被添加到视图层次结构中，但它的大小为 0,0 并且没有子项。当我在本机应用程序中使用完全相同的代码时。一切正常。

更多上下文：

视频播放器/google ima sdk 集成直接从 google ima 示例应用程序复制而来。
当组件放置在原生 anroid 应用程序中时，一切正常。
当检查视图层次结构时，很明显添加了 webview，它的大小为 0,0
当我自己添加一个本地 webview 时，它被渲染得非常好。

来自React Native组件的相关代码：

@SuppressLint("ViewConstructor")
public class ReactVideoViewWithAds extends FrameLayout implements
    LifecycleEventListener {

private VideoPlayerWithAdPlayback mVideoPlayerWithAdPlayback;
private RelativeLayout mCompanionAdSlot;
private VideoPlayerController mVideoPlayerController;

public ReactVideoViewWithAds(ThemedReactContext themedReactContext) {
    super(themedReactContext);
    createViews();
    themedReactContext.addLifecycleEventListener(this);
}

private void createViews() {

    FrameLayout.LayoutParams companionAdLayoutParams = new FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            (int) (50 * getResources().getSystem().getDisplayMetrics().density));
    companionAdLayoutParams.gravity = Gravity.CENTER_HORIZONTAL;
    mCompanionAdSlot = new RelativeLayout(getContext());
    mCompanionAdSlot.setBackgroundColor(Color.BLUE);
    addView(mCompanionAdSlot, companionAdLayoutParams);

    //player with ad playback
    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT);
    mVideoPlayerWithAdPlayback = new VideoPlayerWithAdPlayback(getContext());
    addView(mVideoPlayerWithAdPlayback, layoutParams);


    initPlayer();
}

private void initPlayer() {
    mVideoPlayerController = new VideoPlayerController(
            getContext(),
            mVideoPlayerWithAdPlayback,
            null,
            null,
            "nl",
            mCompanionAdSlot,
            null);
}

Answer 1

This question had the solution in a comment

在原生组件中动态添加视图时，您似乎需要手动触发布局周期，以便 react-native 接受更改。（可能与 react native 更新它的 shadow-view 有关）

 @Override
    public void requestLayout() {
        super.requestLayout();
        post(measureAndLayout);
    }

    private final Runnable measureAndLayout = new Runnable() {
        @Override
        public void run() {
            measure(
                    MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
            layout(getLeft(), getTop(), getRight(), getBottom());
        }
    };

Google IMA webview 在 android 上的 React Native 中使用时不显示

Google IMA webview is not showing when used inside react native on android

android

google-ima

react-native