最近为RN做了一个轮播图的控件，在native代码中运行的很好，但是放入RN之后只能显示最开始的两张图，后面就是空白了，用LayoutInspect一看，view的大小居然是0，通过日志发现原来是没有调measure方法和layout方法。

1.png

2.png

如果你熟悉了View的工作机制，那你应该能理解这个解决方案，如果不理解，可以向下看
为了解释这个问题，我们需要先看requestLayout()的前因后果

1. 完整代码

可以先跳过看完整代码，先放上完整代码是为了方便后面的解释

public class PafTurnPlayer extends FrameLayout implements ViewPager.OnPageChangeListener {

    private Runnable mLayoutRunnable;
    private ViewPager mViewPager;
    private String[] mUrls;
    private List<SimpleDraweeView> unusedList = new ArrayList<>();
    private int delay = 2000; // 默认轮播时间

    final Runnable runnable = new Runnable() {
        @Override
        public void run() {
            if (getContext() != null) {
                int currentItem = mViewPager.getCurrentItem();
                mViewPager.setCurrentItem(currentItem + 1, true);
            }
        }
    };

    public PafTurnPlayer(@NonNull Context context) {
        super(context);
        init(context);
    }

    public PafTurnPlayer(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public PafTurnPlayer(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mViewPager = new ViewPager(context);
        mViewPager.setAdapter(new TurnPlayerAdapter());
        mViewPager.addOnPageChangeListener(this);
        addView(mViewPager);
    }

    void addOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mViewPager.addOnPageChangeListener(listener);
    }

    void setDelay(int delay) {
        this.delay = delay;
    }

    public void setData(String... urls) {
        mUrls = urls;
        mViewPager.getAdapter().notifyDataSetChanged();
        postDelayed(runnable, delay);//开始播放
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            postDelayed(runnable, delay);//恢复自动播放
        } else {
            removeCallbacks(runnable);//禁止自动播放
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
//        postDelayed(runnable, delay);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        removeCallbacks(runnable);
    }

    private class TurnPlayerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mUrls == null ? 0 : (mUrls.length > 1 ? Integer.MAX_VALUE : mUrls.length);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return object == view;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            final SimpleDraweeView view;
            if (unusedList.isEmpty()) {
                view = new SimpleDraweeView(container.getContext());
                view.getHierarchy().setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);
            } else {
                view = unusedList.remove(0);
            }
            view.setController(Fresco.newDraweeControllerBuilder()
                    .setUri(Uri.parse(mUrls[position % mUrls.length]))
                    .setAutoPlayAnimations(true)
                    .build());
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
            unusedList.add((SimpleDraweeView) object);
        }
    }

    @Override
    public void requestLayout() {
        super.requestLayout();
        if (mLayoutRunnable != null) {
            removeCallbacks(mLayoutRunnable);
        }
        mLayoutRunnable = new Runnable() {
            @Override
            public void run() {
                measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                        MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
                layout(getLeft(), getTop(), getRight(), getBottom());
            }
        };
        post(mLayoutRunnable);
    }
}

2. 谁调用了requestLayout？

3.png

4.png

可以看到这两个方法都调用了requestLayout()。

3. requestLayout()做了些啥？

5.png

6.png

7.png

8.png

9.png

10.png

11.png

    private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
            int desiredWindowHeight) {
        mLayoutRequested = false;
        mScrollMayChange = true;
        mInLayout = true;

        final View host = mView;
        if (DEBUG_ORIENTATION || DEBUG_LAYOUT) {
            Log.v(mTag, "Laying out " + host + " to (" +
                    host.getMeasuredWidth() + ", " + host.getMeasuredHeight() + ")");
        }

        Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout");
        try {
            host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());

            mInLayout = false;
            int numViewsRequestingLayout = mLayoutRequesters.size();
            if (numViewsRequestingLayout > 0) {
                // requestLayout() was called during layout.
                // If no layout-request flags are set on the requesting views, there is no problem.
                // If some requests are still pending, then we need to clear those flags and do
                // a full request/measure/layout pass to handle this situation.
                ArrayList<View> validLayoutRequesters = getValidLayoutRequesters(mLayoutRequesters,
                        false);
                if (validLayoutRequesters != null) {
                    // Set this flag to indicate that any further requests are happening during
                    // the second pass, which may result in posting those requests to the next
                    // frame instead
                    mHandlingLayoutInLayoutRequest = true;

                    // Process fresh layout requests, then measure and layout
                    int numValidRequests = validLayoutRequesters.size();
                    for (int i = 0; i < numValidRequests; ++i) {
                        final View view = validLayoutRequesters.get(i);
                        Log.w("View", "requestLayout() improperly called by " + view +
                                " during layout: running second layout pass");
                        view.requestLayout();
                    }
                    measureHierarchy(host, lp, mView.getContext().getResources(),
                            desiredWindowWidth, desiredWindowHeight);
                    mInLayout = true;
                    host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());

                    mHandlingLayoutInLayoutRequest = false;

                    // Check the valid requests again, this time without checking/clearing the
                    // layout flags, since requests happening during the second pass get noop'd
                    validLayoutRequesters = getValidLayoutRequesters(mLayoutRequesters, true);
                    if (validLayoutRequesters != null) {
                        final ArrayList<View> finalRequesters = validLayoutRequesters;
                        // Post second-pass requests to the next frame
                        getRunQueue().post(new Runnable() {
                            @Override
                            public void run() {
                                int numValidRequests = finalRequesters.size();
                                for (int i = 0; i < numValidRequests; ++i) {
                                    final View view = finalRequesters.get(i);
                                    Log.w("View", "requestLayout() improperly called by " + view +
                                            " during second layout pass: posting in next frame");
                                    view.requestLayout();
                                }
                            }
                        });
                    }
                }

            }
        } finally {
            Trace.traceEnd(Trace.TRACE_TAG_VIEW);
        }
        mInLayout = false;
    }

核心点在host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight())，该方法也会向下传递布局动作，直到ReactRootView。

综上所述

轮播图在播放或者滚动时会触发requestLayout，进而对整个视图树进行重新测量和布局，但ReactRootView阻断了测量和布局的传递，导致了轮播图的item无法更新视图。解决方案也就很好理解了，在requestLayout时我们手动调用了轮播图组件的measure和layout方法，从而接上了整个视图树的重新调整动作。

完结撒花。