SwipeALot
Một thành phần swipe cho React Native hoạt động trên cả iOS và Android.
Mục lục
- Tại sao tạo ra điều này?
- Tính năng
- Bắt đầu
- Chạy demo
- Cấu hình
- API
- Cách sử dụng
- Phương thức
- Giấy phép
Tại sao tạo ra điều này?
Tôi đã thấy các thành phần swipe hiện có gặp lỗi và không hoạt động đầy đủ trên cả hai nền tảng.
Tính năng
- Tự động phát
- Swipe theo chiều ngang
- Hoạt động khi thay đổi hướng
- Đa nền tảng
- Hoạt động với mọi kích thước view
- Tùy chỉnh kiểu dáng
- Nút hình tròn nhấn được
- API
Bắt đầu
Cài đặt gói npm.
npm i react-native-swipe-a-lot --save
Nhập thành phần SwipeALot bất cứ nơi nào bạn muốn sử dụng nó.
import SwipeALot from 'react-native-swipe-a-lot'
Trong phương thức render của bạn, đơn giản sử dụng nó như một bao bọc xung quanh các Views.
class Root extends React.Component {
render() {
return (
<SwipeALot>
<View>
<Text>This is slide 1</Text>
</View>
<View>
<Text>This is slide 2</Text>
</View>
</SwipeALot>
)
}
}
Chạy demo
Đầu tiên chạy npm install
Sau đó đơn giản chạy react-native run-android hoặc react-native run-ios
Cấu hình
Bạn có thể truyền những thuộc tính này cho thành phần:
autoplay làm cho thành phần tự động swipe đến các trang khác. Mặc định bị tắt. Truyền một đối tượng như một prop ở đây để cấu hình nó:
{
enabled: false,
disableOnSwipe: false,
delayBetweenAutoSwipes: 5000
}
onSetActivePage là một hàm trả về chỉ số hiện tại của trang khi người dùng swipe hoặc nhấp vào một hình tròn
<SwipeALot
onSetActivePage={(index) => { console.log('Current Page is: ', index); }}
>
</SwipeALot>
wrapperStyle xác định cách mà container chứa các view swipe trông như thế nào. Mặc định không áp dụng bất kỳ kiểu dáng nào.
circleDefaultStyle xác định cách các vòng tròn không hoạt động trên thành phần swiper của bạn trông như thế nào. Bạn có thể truyền một đối tượng ở đây với các thuộc tính kiểu mà bạn muốn ghi đè.
Kiểu mặc định:
{
width: PixelRatio.getPixelSizeForLayoutSize(6),
height: PixelRatio.getPixelSizeForLayoutSize(6),
margin: 10,
backgroundColor: 'rgb(158, 158, 158)',
borderRadius: PixelRatio.getPixelSizeForLayoutSize(3)
}
circleActiveStyle xác định cách vòng tròn hoạt động trên thành phần swiper của bạn trông như thế nào. Bạn có thể truyền một đối tượng ở đây với các thuộc tính kiểu mà bạn muốn ghi đè.
Kiểu mặc định:
{
backgroundColor: 'rgb(245, 245, 245)',
}
API
Cách sử dụng
Đơn giản là lưu một tham chiếu đến thành phần của bạn và sau đó gọi những phương thức này ở bất kỳ đâu trong ứng dụng của bạn.
Bạn có thể lưu tham chiếu như sau:
<SwipeALot ref={(c) => this.swiper = c}>
Sau đó chỉ cần gọi các phương thức sau trên biến của bạn, ví dụ this.swiper.swipeToPage(1)
Phương thức
getPage()
Lấy chỉ số trang hiện tại
swipeToPage(page)
Chuyển đến một trang. Điều này có thể được sử dụng để đặt nút chồng lên phía trên
stopAutoplay()
Dừng chơi tự động.
startAutoplay()
Bắt đầu chơi tự động.
Chi tiết tải xuống:
Tác giả: nickjanssen
Nguồn: https://github.com/nickjanssen/react-native-swipe-a-lot
Giấy phép: MIT license
