使用多个可见页面

时间:2016-02-03 04:58:00

标签: android react-native

我一直在尝试使用ViewPagerAndroid显示带有"停止"的旋转木马。在每个项目如此:

carousel

在Android上,似乎反应原生轮播和反应本机swiper不支持这些功能。我有一个本机ViewPager,可以完成我需要它做的事情,但是我在将它合并到React Native环境中时遇到了问题。

本机组件CarouselContainer使用layout.xml并期望一个ViewPager子组件。

     <com.mycompany.ui.CarouselContainer
        android:id="@+id/pager_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_gravity="center_horizontal" />

    </com.mycompany.ui.CarouselContainer >

CarouselContainer是一个FrameLayout子类,它在onFinishInflate方法中获取ViewPager的引用。它在ViewPager和setPageMargin上调用setClipChildren(false)以在屏幕上同时呈现多个ViewPager页面。

我看了一下ViewPagerAndroid的实现,看起来它基本上是ReactViewPagerManager设置的ViewPager。 ReactViewPagerManager通过ViewGroupManager接口公开ViewPager的子视图。

因此,我将ReactViewPagerManagerCarouselViewPagerManager中的ReactViewPager复制到CarouselViewPager

这里有一件事是CarouselViewPagerContainer。管理器创建容器,容器创建视图寻呼机,而不是直接创建视图寻呼机的管理器。由于没有布局xml,容器会直接实例化寻呼机,而不是从onFinishInflate获取它。

出于某种原因,我在使用它时屏幕上没有任何渲染。我认为这是因为中间有CarouselViewPagerContainer视图,但我不确定从哪里开始。我需要弄乱LayoutShadowNode吗?我是否需要将CarouselViewPager本身添加到管理器返回的子视图列表中?

Native UI Components文档仅提及SimpleViewManager。 :(

// Copy of ReactViewPagerManager
public class CarouselViewPagerManager extends ViewGroupManager<CarouselViewPagerContainer> {

    @Override
    protected CarouselViewPagerContainer createViewInstance(ThemedReactContext reactContext) {
        return new CarouselViewPagerContainer(reactContext);
    }

    // ...

    @Override
    public void addView(CarouselViewPagerContainer parent, View child, int index) {
        parent.addViewToAdapter(child, index);
    }

    @Override
    public int getChildCount(CarouselViewPagerContainer parent) {
        // Should the CarouselViewPager be also counted?
        return parent.getViewCountInAdapter();
    }

    @Override
    public View getChildAt(CarouselViewPagerContainer parent, int index) {
        return parent.getViewFromAdapter(index);
    }

    @Override
    public void removeViewAt(CarouselViewPagerContainer parent, int index) {
        parent.removeViewFromAdapter(index);
    }

}


public class CarouselViewPagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener {

    private final CarouselViewPager mPager; // Copy of ReactViewPager

    public CarouselViewPagerContainer(ReactContext context) {
        mPager = new CarouselViewPager(context);
    }

    // ...

    // Pass through to the CarouselViewPager
    public void setCurrentItemFromJs(int item, boolean animated) {
        mPager.setCurrentItemFromJs(item, animated);
    }

    /*package*/ void addViewToAdapter(View child, int index) {
        mPager.addViewToAdapter(child, index);
    }

    /*package*/ void removeViewFromAdapter(int index) {
        mPager.removeViewFromAdapter(index);
    }

    /*package*/ int getViewCountInAdapter() {
        return mPager.getViewCountInAdapter();
    }

    /*package*/ View getViewFromAdapter(int index) {
        return mPager.getViewFromAdapter(index);
    }
}

如果你知道一个更简单的方法来解决这个问题我全都耳朵!

我的意思是我唯一使用FrameLayout容器的方法是将第一个Viewpager页面居中并占用空间,以便显示多个页面。 :/

这是一场如此艰难的斗争:(

0 个答案:

没有答案