Cách Dễ Dàng Thêm ActionSheets vào Ứng dụng React Native của Bạn

React Native ActionSheet

React Native ActionSheet là một thư viện JavaScript dành cho React Native mà thực hiện ActionSheet cho Android. Đây là phiên bản tương đương của ActionSheetIOS, một phần của React Native.

Đối với việc triển khai phiên bản Android, tôi đã sử dụng android-ActionSheet.

Yêu cầu

• React Native >= 0.40.0
• Android

Cài đặt React Native ActionSheet

npm install react-native-actionsheet-native --save
# OR
yarn add react-native-actionsheet-native

Chuẩn bị

React Native >= 0.40.0

Bạn có thể chạy lệnh sau bên trong thư mục dự án của bạn:

react-native link react-native-actionsheet-native

React Native >= 0.33.0 VÀ < 0.40.0

• Trong android/setting.gradle

  …
  include ‘:react-native-actionsheet-native’, ‘:app’
  project(‘:react-native-actionsheet-native’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-actionsheet-native/android’)

• Trong android/app/build.gradle

  apply plugin: “com.android.application”
  …
  dependencies {
  …
  compile project(“:react-native-actionsheet”) // <— add this
  …
  }

• Đăng ký Mô-đun (trong MainActivity.java)

  import com.slowpath.actionsheet.ActionSheetPackage; // <— import and this

  public class MyApplication extends Application implements ReactApplication {

  ……

  @Override
  protected List getPackages() {
  return Arrays.asList(
  new ActionSheetPackage(), // <—— add this line to you application
  new MainReactPackage());
  }

  ……

  }

Cập nhật MainActivity của bạn

Bây giờ, bạn cần cập nhật MainActivity của bạn. MainActivity nên mở rộng từ ReactFragmentActivity để làm việc với thư viện này.

public class MainActivity extends ReactFragmentActivity {
  ...
}

Sử dụng

Từ các tệp JS của bạn cho cả iOS và Android:

import ActionSheet from 'react-native-actionsheet';

ActionSheet.showActionSheetWithOptions({
  options: ['Disconnect', 'Cancel'],
  cancelButtonIndex: 1
},
(buttonIndex) => {
  const { dispatch } = this.props;
  if (buttonIndex === 0) {
    // Do something.
  }
});

Tùy chỉnh ActionSheet cho Android

Nếu bạn muốn tùy chỉnh giao diện của ActionSheet cho Android, bạn cần đọc this article

Giấy phép

React Native ActionSheet có giấy phép BSD.

Chi tiết Tải về:

Tác giả: martincik
Mã nguồn: https://github.com/martincik/react-native-actionsheet-native

Giấy phép: MIT license