最近為RN做了一個(gè)輪播圖的控件，在native代碼中運(yùn)行的很好，但是放入RN之后只能顯示最開始的兩張圖，后面就是空白了，用LayoutInspect一看，view的大小居然是0，通過日志發(fā)現(xiàn)原來是沒有調(diào)measure方法和layout方法。

1.png

2.png

如果你熟悉了View的工作機(jī)制，那你應(yīng)該能理解這個(gè)解決方案，如果不理解，可以向下看
為了解釋這個(gè)問題，我們需要先看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; // 默認(rèn)輪播時(shí)間

    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);//恢復(fù)自動(dòng)播放
        } else {
            removeCallbacks(runnable);//禁止自動(dòng)播放
        }
    }

    @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. 誰調(diào)用了requestLayout？

3.png

4.png

可以看到這兩個(gè)方法都調(diào)用了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;
    }

核心點(diǎn)在host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight())，該方法也會(huì)向下傳遞布局動(dòng)作，直到ReactRootView。

綜上所述

輪播圖在播放或者滾動(dòng)時(shí)會(huì)觸發(fā)requestLayout，進(jìn)而對(duì)整個(gè)視圖樹進(jìn)行重新測量和布局，但ReactRootView阻斷了測量和布局的傳遞，導(dǎo)致了輪播圖的item無法更新視圖。解決方案也就很好理解了，在requestLayout時(shí)我們手動(dòng)調(diào)用了輪播圖組件的measure和layout方法，從而接上了整個(gè)視圖樹的重新調(diào)整動(dòng)作。

完結(jié)撒花。