在Android上的本机React内部使用Google IMA Webview时未显示 [英] Google IMA webview is not showing when used inside react native on android

问题描述

简而言之:我们使用Android上的reacte原生，并使用Android上的Google IMA SDK使用原生的VideoView来显示带有广告的视频.视频播放，广告播放，但是包含阅读更多"和跳过广告"的Web视图不可见.它已添加到视图层次结构中，但是大小为0,0，并且没有子级.当我在本机应用程序中使用完全相同的代码时.一切都按预期进行.

In short: We use reacte native on android and use the native VideoView to show videos with ads using the Google IMA SDK for android. The video plays, the ads play, but the Webview containing "read more" and "skip ad" is not visible. It's added to the view hierarchy, but it's size 0,0 and it has no children. When I use the exact same code in a native app. Everything works as expected.

更多背景信息:

• 直接从google ima示例应用中复制视频播放器/google ima sdk集成.
• 将组件放置在本机anroid应用程序中后，一切正常.
• 检查视图层次结构时，很明显已添加了webview，其大小为0,0
• 当我自己添加本地Webview时，可以很好地使用它.

React Native组件中的相关代码:

Relevant code from the React Native component:

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

推荐答案

此问题已在注释中给出了解决方案

在本机组件中动态添加视图时，您似乎需要手动触发布局周期，以便react-native能够获取更改. (可能与本机更新的影子视图有关)

When adding views dynamically in a native component it seems you need to manually trigger a layout cycle in order for react-native to pick up on the changes. (perhaps related to react native updating it's 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());
        }
    };

这篇关于在Android上的本机React内部使用Google IMA Webview时未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！