React Native SwipeView
Ứng dụng danh sách công việc được xây dựng với SwipeView (Watch it on YouTube)
Bắt Đầu
- Cài Đặt
- Sử Dụng Cơ Bản
- Thuộc Tính
- Todo-list Project
Cài Đặt
$ npm i react-native-swipeview --save
Sử Dụng Cơ Bản
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SwipeView from 'react-native-swipeview';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<SwipeView
renderVisibleContent={() => <Text style={styles.text}>SwipeMe</Text>}
/>
</View>
);
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
backgroundColor: 'whitesmoke',
padding: 20,
}
});
Thuộc Tính
Cơ Bản
| Thuộc Tính | Kiểu | Mô Tả | Mặc Định |
|---|---|---|---|
| leftOpenValue | number |
TranslateX: Mức độ mở view từ bên trái khi vuốt sang phải (số dương). | 0 |
| rightOpenValue | number |
TranslateX: Mức độ mở view từ bên phải khi vuốt sang trái (số âm). | 0 |
| swipeDuration | number |
Thời gian của hiệu ứng vuốt sang phải hoặc trái. | 250 |
| swipeToOpenPercent | number |
% mở cửa trái/phải openValue mà người dùng cần vuốt qua để kích hoạt hành động onSwipedLeft/onSwipedRight. | 35 |
| disableSwipeToLeft | bool |
Tắt khả năng vuốt view sang trái. | false |
| disableSwipeToRight | bool |
Tắt khả năng vuốt view sang phải. | false |
| onSwipedLeft | func |
Được gọi khi vuốt sang trái hoàn tất. | – |
| onSwipedRight | func |
Được gọi khi vuốt sang phải hoàn tất. | – |
| previewSwipeDemo | bool |
Có nên thực hiện hiệu ứng trượt ra để cho thấy nó có thể được vuốt hay không. | false |
| previewDuration | number |
Thời gian của hiệu ứng trượt ra. | 300 |
| previewOpenValue | number |
Giá trị TranslateX cho hiệu ứng trượt ra. | -60 |
| previewOpenDelay | number |
Độ trễ trước khi bắt đầu hiệu ứng trượt ra. | 350 |
| previewCloseDelay | number |
Độ trễ trước khi đóng hiệu ứng trượt ra. | 300 |
| swipingLeft | bool |
Có nên khởi tạo việc vuốt sang phải trước. Điều này có thể hữu ích cho việc xem trước việc vuốt: +ve previewOpenValue swipingLeft: false & -ve previewOpenValue swipingLeft: true. |
true |
| recalculateHiddenLayout | bool |
Bật tính toán layout ẩn luôn chạy. | false |
| directionalDistanceChangeThreshold | number |
Thay đổi độ nhạy của hàng. | 2 |
Các View
| Thuộc Tính | Kiểu | Mô Tả | Mặc Định |
|---|---|---|---|
| renderVisibleContent | func |
View nội dung chính. | – |
| renderLeftView | func |
View bên trái để hiển thị phía sau view bên phải. | – |
| renderRightView | func |
View bên phải để hiển thị phía sau view mục. | – |
Đóng Góp
- @rishabhbhatia Tác giả.
Người Đóng Góp
Tham khảo: react-native-swipe-list-view (Github)
Câu Hỏi
Hãy liên hệ với tôi hoặc Create an issue
Chi tiết Tải về:
Tác giả: rishabhbhatia
Nguồn: https://github.com/rishabhbhatia/react-native-swipeview
Giấy Phép: MIT license
