react-native-switch-pro (2.0 đang trong quá trình phát triển)
Một công tắc đa năng dành cho Android và iOS, có thể là công tắc tốt nhất cho react-native trên Github.
Xem trước
Tính năng
- Công tắc gần như hoàn hảo trên react-native
- Hiệu suất tốt trên cả iOS và Android
- Thêm cử chỉ với
PanResponder - Thêm nhiều hiệu ứng để tương thích với hiệu suất iOS gốc
- Hỗ trợ sự kiện bất đồng bộ và đồng bộ
- Hỗ trợ ràng buộc dữ liệu hai chiều
- Mã nguồn sáng sủa
Cài đặt
npm install react-native-switch-pro --save
Sử dụng
-
Đồng bộ
import Switch from ‘react-native-switch-pro’
…
render() {
return (
{…}}/>
)
}
… -
Bất đồng bộ
…
render() {
return (
{
You can call your async module and just invoke callback(true) when succeed,
callback(false) when fail.
}}/>
)
}
…
Thuộc tính
| Tên | Mô tả | Mặc định | Loại |
|---|---|---|---|
| width | Chiều rộng của công tắc | 40 | số |
| height | Chiều cao của công tắc | 21 | số |
| value | Trạng thái của công tắc có thể được sử dụng để ràng buộc hai chiều | undefined | bool |
| disabled | Có phải công tắc có thể nhấn không | false | bool |
| circleColorActive | Màu cho bút tròn của công tắc khi bật | trắng | chuỗi |
| circleColorInactive | Màu cho bút tròn của công tắc khi tắt | trắng | chuỗi |
| style | Kiểu dáng sẽ được áp dụng cho khung công tắc | undefined | kiểu dáng |
| circleStyle | Kiểu dáng sẽ được áp dụng cho bút tròn | undefined | kiểu dáng |
| backgroundActive | Màu của công tắc khi bật | xanh lá cây | chuỗi |
| backgroundInactive | Màu của công tắc khi tắt | ‘#ddd’ | chuỗi |
| onSyncPress | Gọi lại khi công tắc được nhấn | () => null | func |
| onAsyncPress | Có gọi lại với kết quả bất đồng bộ | (value, callback) => {callback(true)} | func |
Lưu ý
Cảm ơn bạn!
Bạn nên không sử dụng onSyncPress và onAsyncPress cùng một lúc, nếu không chỉ onSyncPress mới được gọi.
value được sử dụng để ràng buộc hai chiều với redux, state và những thứ tương tự.
Trong onAsyncPress, bạn nên viết như sau (với state):
value => this.setState({value}) sẽ chỉ được gọi khi kết quả là true.
<Switch
value={this.state.value}
onAsyncPress={(callback) => {
callback(false or true, value => this.setState({value}))
}}
/>
Chi tiết tải về:
Tác giả: poberwong
Nguồn: https://github.com/poberwong/react-native-switch-pro
Giấy phép: MIT license
Cảm ơn bạn!
