React Native Radial Menu: Thêm Một Menu Hình Tròn vào Ứng Dụng React Native Của Bạn

React Native Radial Menu

Cài Đặt

npm install react-native-radial-menu

Sử Dụng

var RadialMenu = require('react-native-radial-menu');

var Application = React.createClass({
  render: function() {
    return (
      <View>
        <RadialMenu onOpen={() => {}} onClose={() => {}}>
          <Text>ROOT</Text>
          <Text onSelect={() => {}}>A</Text>
          <Text onSelect={() => {}}>B</Text>
          <Text onSelect={() => {}}>C</Text>
          <Text onSelect={() => {}}>D</Text>
        </RadialMenu>
      </View>
    )
  }
})

Ví Dụ

// Examples Coming soon

Thuộc Tính

Menu này có thể được tùy chỉnh hoàn toàn bằng cách sử dụng props.

Quan Trọng

• itemRadius (Số) 30 – Bán kính của mục trong menu
• menuRadius (Số) 100– Khoảng cách giữa gốc và các mục khi menu mở.
• spreadAngle (Số: 0 – 360) 360 – Góc theo độ dựa trên đó các mục menu được phân bố xung quanh gốc theo hình tròn. Ví dụ, 360 độ là một vòng tròn đầy đủ, 180 độ là một nửa vòng tròn và cứ thế.
• startAngle (Số) 0 – Các mục được phân bố theo chiều kim đồng hồ bắt đầu từ góc startAngle. 0 là bên trái, 90 là phía trên, và cứ thế.

Callbacks Của Menu

• onOpen (Hàm) – Được gọi ngay sau khi menu đã chuyển sang trạng thái mở.
• onClose (Hàm) – Được gọi ngay sau khi menu đã chuyển sang trạng thái đóng.

Callbacks Của Mục Menu

• onSelect (Hàm) – Được gọi khi mục được chọn

Hiệu Ứng

Sẽ có sớm

Demo

• git clone https://github.com/omulet/react-native-radial-menu.git
• cd react-native-radial-menu/examples/rnRadialMenu && npm install
• Mở ./examples/rnRadialMenu/ios/rnRadialMenu.xcodeproject trong xcode
• command+r (trong xcode)

Credits

Chi Tiết Tải Về:

Tác Giả: omulet
Nguồn: https://github.com/omulet/react-native-radial-menu