我一直在尝试使用ViewPagerAndroid显示带有"停止"的旋转木马。在每个项目如此:
在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的子视图。
因此,我将ReactViewPagerManager
和CarouselViewPagerManager
中的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页面居中并占用空间,以便显示多个页面。 :/
这是一场如此艰难的斗争:(