React Native Gestures: Thêm Các Cử chỉ vào Ứng dụng React Native Của Bạn

Các Cử chỉ React Native

:warning: Gói này vẫn đang ở giai đoạn sớm, nó sẽ có nhiều thay đổi về API trước khi nó đạt phiên bản 1.0 :warning:

Thư viện Cử chỉ React Native Có thể Tái sử dụng

Ví dụ

Bắt đầu

Giả sử bạn đang sử dụng react-native, vì tôi không biết nó sẽ hoạt động như thế nào trong các thư viện khác…

• Cài đặt qua npm

  npm i -S react-native-gestures

Sau đó, viết một số mã JavaScript giống như các ví dụ mã đơn giản như một thành phần React và hiển thị nó trong ứng dụng react-native của bạn.

import React, {
  View,
  Text
} from 'react-native';

import {
  drag,
  pinch,
  GestureView
} from 'react-native-gestures';

export default React.createClass({
  render() {
    onGestureError(err) {
      console.error(err);
    },
    return (
      <View>
        <GestureView
          style={movable}
          gestures={[drag, pinch]}
          toStyle={(layout) => {
            return {
              top: layout.y,
              left: layout.x,
              width: layout.width,
              height: layout.height,
              transform: [{rotate: `${layout.rotate}deg`}]
            }
          }}
          onError={console.error.bind(console)}>
          <Text>HEHE</Text>
          <Text>HEHE</Text>
        </GestureView>
      </View>
    );
  }
});

API

Như bạn có thể thấy, nó chỉ là một thành phần React rất đơn giản bạn có thể sử dụng trong gói này, có thể nó sẽ có nhiều thành phần hơn trong tương lai, hoặc không.

Có một số thuộc tính nó chấp nhận:

• gestures – một Mảng các cử chỉ
• onError – một Hàm sẽ được gọi khi có điều gì đó xấu xảy ra
• style – một style giống như thuộc tính style của <View>
• toStyle – một hàm ánh xạ cho phép bạn chọn các thay đổi bạn muốn cho kiểu css
• children – … bạn biết rồi, chỉ là các thành phần React, không có gì đặc biệt

Ví dụ:

let style = { position: 'absolute', backgroundColor: '#F00' };

<GestureView
  style={style}
  onError={console.error.bind(console)}
  gestures={[...]}>
  <Text>This is the children I say</Text>
</GestureView>

Các Cử chỉ

Mọi cử chỉ trong mô-đun này chỉ là sự kết hợp đơn giản của hai điều:

Một transducer được gọi là calculate (xin vui lòng đề xuất cho tôi một cái tên tốt hơn)

Đây là hàm thực sự tính toán vị trí mới của chế độ xem khi sự kiện cử chỉ di chuyển xảy ra.

Một số được gọi là GESTURE_NUMBER
Cảm ơn bạn!
Điều này xác định rằng cử chỉ sẽ bắt đầu tính toán khi số cử chỉ khớp với số này.

Bạn có thể đặt bất kỳ số nào bạn muốn nếu màn hình cảm ứng của bạn hỗ trợ nó :p

kéo

Đó chỉ là một transducer đơn giản nhận đầu vào của một ngón tay với sự di chuyển của ngón tay và tạo ra bố cục mới của thành phần.

bóp

Đó là một cử chỉ bóp, cũng là một cử chỉ thu phóng. Nó cần hai cử chỉ của hai ngón tay và tạo ra bố cục mới của thành phần.

Đóng góp

Sử dụng

Chi tiết tải về:

Tác giả: kiddkai
Nguồn: https://github.com/kiddkai/react-native-gestures

Cảm ơn bạn!