实现左右滑动,官方有一个组件,但是已经废弃了,
![](https://img.kancloud.cn/24/53/2453d2b137cb1014bd811b3a751fcf3b_1632x610.png)
官方推荐我们使用:[https://github.com/react-native-community/react-native-viewpager](https://github.com/react-native-community/react-native-viewpager)
# 安装
~~~
yarn add @react-native-community/viewpager`
~~~
我们项目中已经在最开始安装好了。
# 使用
实现左右滑动:
![](https://img.kancloud.cn/ef/85/ef85bd6ddb93394d2eb5f4317933587b_1550x1274.png)
# 通过点击按钮实现滑动
ViewPager 组件中有一个 `setPage` 方法,调用这个方法可以实现页面的切换,
比如:要切换到第二个页面:`setPage(1)`。
知识点:使用 `ref` 来获取对一个组件的引用。
使用 ref 的步骤:
1. 先创建一个 ref:`React.createRef()`
2. 把创建的 ref 绑定到对应的组件上:`ref={创建的ref对象}`
![](https://img.kancloud.cn/70/da/70dad5279e1bac30a9547dc4a3d079e3_2138x1276.png)