Dễ dàng Thêm Các Hộp Thoại Tùy Chỉnh vào Ứng Dụng React Native Android Của Bạn

react-native-simpledialog-android

Mô-đun React Native Android để sử dụng AlertDialog của Android – cùng ý tưởng với AlertIOS

Cài Đặt

npm install react-native-simpledialog-android --save

Thêm nó vào dự án android của bạn

• Trong android/settings.gradle

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

• Trong android/app/build.gradle

  …
  dependencies {
  …
  compile project(‘:RNSimpleAlertDialogModule’)
  }

• Đăng ký Mô-đun >= 0.17 && <= 0.29 (trong MainActivity.java)

• LƯU Ý: >= RN 29 chia MainActivity.java thành MainActivity.java và MainApplication.java. Vì vậy, hãy thực hiện các thay đổi dưới đây trong MainApplication.java

  import com.burnweb.rnsimplealertdialog.RNSimpleAlertDialogPackage; // <— import

  public class MainApplication extends Application implements ReactApplication {
  ……

  @Override
  protected List getPackages() {
  return Arrays.asList(
  new MainReactPackage(),
  new RNSimpleAlertDialogPackage()); // <—— add this line to your MainApplication class
  }

  ……

  }

Sử Dụng

Mô-đun này rất tương tự với mô-đun nguyên gốc AlertIOS, và chỉ hoạt động với phương thức alert (phương thức prompt chưa được thực hiện).

Sự khác biệt chính nằm ở cách bạn khai báo nút. Trong Android, bạn có thể khai báo tối đa 3 nút và trong mô-đun này, bạn phải khai báo loại nút là gì. Một nút có thể là SimpleAlert.POSITIVE_BUTTON, SimpleAlert.NEGATIVE_BUTTON hoặc SimpleAlert.NEUTRAL_BUTTON.

Ví dụ

var SimpleAlert = require('react-native-simpledialog-android');

function _onPress(event) {
    console.log(event);
};

SimpleAlert.alert(
    'Please read me!',
    'Want a warning alert?', [
      { type: SimpleAlert.POSITIVE_BUTTON, text: 'Yes', onPress: _onPress },
      { type: SimpleAlert.NEGATIVE_BUTTON, text: 'No', onPress: _onPress },
      { type: SimpleAlert.NEUTRAL_BUTTON, text: 'Neutral', onPress: _onPress },
    ]
);

Chi tiết tải về:

Tác giả: lucasferreira
Nguồn: https://github.com/lucasferreira/react-native-simpledialog-android