├── .gitignore ├── MyAndroidDialog.js ├── MyIosDialog.js ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── com │ │ └── honaf │ │ └── dialog │ │ ├── MyDialogModule.java │ │ └── MyDialogPackage.java │ └── res │ ├── drawable │ └── bg_home_search.xml │ └── values │ └── strings.xml ├── android_actionSheet.png ├── android_inputDialog.png ├── index.js ├── ios_actionSheet.png ├── ios_inputDialog.png └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | *.iml 30 | build 31 | local.properties 32 | 33 | # node.js 34 | 35 | node_modules/* 36 | !node_modules/manifest 37 | 38 | app/test 39 | npm-debug.log 40 | ios/CustomVariable.h 41 | ios/bundle 42 | android/app/src/main/java/com/pet/button 43 | -------------------------------------------------------------------------------- /MyAndroidDialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dialog 3 | * Author:honaf 4 | */ 5 | 'use strict'; 6 | 7 | import { 8 | Component, 9 | NativeModules, 10 | } from 'react-native'; 11 | 12 | let MyDialogModule = NativeModules.MyDialogModule; 13 | 14 | let MyAndroidDialog = { 15 | 16 | /** 17 | * 参数方法都是以ios用法为标准（具体可参考TopicCell.js） 18 | * options: 要显示的数组, 19 | * cancelButtonIndex: 取消的索引 20 | * destructiveButtonIndex: 警告的索引 21 | * callback: 选择item的回调 22 | */ 23 | showActionSheetWithOptions(obj,callback){ 24 | MyDialogModule.actionSheet(obj.options,(index)=>{ 25 | callback(index); 26 | }); 27 | }, 28 | /** 29 | * 参数方法都是以ios用法为标准（具体可参考AddPet.js） 30 | * title 提示标题(必须) 31 | * message 提示文本 (android暂时未用到) 32 | * callbackOrButtons [{text:'确定',onPress:(value)=>{}}] （必须） 33 | * content 输入框默认值（暂时为android添加） （可填） 34 | */ 35 | prompt(title, message, callbackOrButtons, type,content){ 36 | MyDialogModule.inputDialog({title:title,content:content,callbackOrButtons:callbackOrButtons},(msg)=>{ 37 | callbackOrButtons[0].onPress(msg); 38 | },(msg)=>{ 39 | if(callbackOrButtons[1]){ 40 | callbackOrButtons[1].onPress(msg); 41 | } 42 | }); 43 | }, 44 | 45 | } 46 | 47 | module.exports = MyAndroidDialog; -------------------------------------------------------------------------------- /MyIosDialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dialog 3 | * Author:honaf 4 | */ 5 | 'use strict'; 6 | 7 | import { 8 | Component, 9 | ActionSheetIOS, 10 | AlertIOS 11 | } from 'react-native'; 12 | 13 | let MyIosDialog = { 14 | 15 | showActionSheetWithOptions(obj,callback){ 16 | ActionSheetIOS.showActionSheetWithOptions({ 17 | options: obj.options, 18 | cancelButtonIndex: obj.cancelButtonIndex, 19 | destructiveButtonIndex: obj.destructiveButtonIndex, 20 | }, 21 | (buttonIndex) => { 22 | callback(buttonIndex) 23 | }); 24 | }, 25 | 26 | prompt(title, message, callbackOrButtons, type){ 27 | AlertIOS.prompt(title,message,callbackOrButtons,type); 28 | }, 29 | 30 | 31 | } 32 | 33 | module.exports = MyIosDialog; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-dialog 2 | 3 | ![android](https://github.com/honaf/react-native-dialog/raw/master/android_actionSheet.png) 4 | ![ios](https://github.com/honaf/react-native-dialog/raw/master/ios_actionSheet.png) 5 | 6 | ![android](https://github.com/honaf/react-native-dialog/raw/master/android_inputDialog.png) 7 | ![ios](https://github.com/honaf/react-native-dialog/raw/master/ios_inputDialog.png) 8 | 9 | 10 | 11 | 12 | ## Installation 13 | 14 | First you need to install react-native-dialog: 15 | 16 | ```javascript 17 | $ npm install react-native-dialog --save 18 | ``` 19 | 20 | **Add Configuration** 21 | link 22 | ```javascript 23 | ($ npm install rnpm --global) 24 | $ rnpm link react-native-dialog 25 | ``` 26 | 27 | If the link fails, manually add 28 | 29 | settings.gradle 30 | ```java 31 | include ':react-native-dialog' 32 | project(':react-native-dialog').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialog/android') 33 | ``` 34 | build.gradle 35 | ```java 36 | dependencies { 37 | ... 38 | compile project(':react-native-dialog') 39 | } 40 | ``` 41 | MainActivity 42 | ```java 43 | import com.honaf.dialog.MyDialogPackage; 44 | @Override 45 | protected List getPackages() { 46 | return Arrays.asList( 47 | ... 48 | new MyDialogPackage(), 49 | ); 50 | 51 | } 52 | ``` 53 | 54 | ## Release Notes 55 | 56 | * 1.0.7 57 | 58 | ## Example 59 | 60 | ```js 61 | import Dialog from ('react-native-dialog'); 62 | 63 | Dialog.showActionSheetWithOptions({ 64 | options: arr, 65 | cancelButtonIndex: arr.length - 1, 66 | destructiveButtonIndex: 0, 67 | }, 68 | (buttonIndex) => { 69 | if (buttonIndex == 0) { 70 | ... 71 | } 72 | }); 73 | 74 | 75 | Dialog.prompt("填写资料", null, [{ 76 | text: '确定', 77 | onPress: (value) => { 78 | ... 79 | }, 80 | }]; , undefined); 81 | 82 | 83 | ``` 84 | 85 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.1" 6 | 7 | defaultConfig { 8 | minSdkVersion 16 9 | targetSdkVersion 22 10 | versionCode 1 11 | versionName "1.0" 12 | } 13 | buildTypes { 14 | release { 15 | minifyEnabled false 16 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 17 | } 18 | } 19 | } 20 | 21 | dependencies { 22 | compile 'com.facebook.react:react-native:0.20.+' 23 | } 24 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /android/src/main/java/com/honaf/dialog/MyDialogModule.java: -------------------------------------------------------------------------------- 1 | package com.honaf.dialog; 2 | 3 | 4 | 5 | import android.app.Activity; 6 | import android.content.DialogInterface; 7 | import android.support.v7.app.AlertDialog; 8 | import android.support.v7.widget.AppCompatEditText; 9 | import android.view.ViewGroup; 10 | import android.view.WindowManager.LayoutParams; 11 | import android.widget.LinearLayout; 12 | 13 | import com.facebook.react.bridge.Callback; 14 | import com.facebook.react.bridge.ReactApplicationContext; 15 | import com.facebook.react.bridge.ReactContext; 16 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 17 | import com.facebook.react.bridge.ReactMethod; 18 | import com.facebook.react.bridge.ReadableArray; 19 | import com.facebook.react.bridge.ReadableMap; 20 | 21 | 22 | /** 23 | * Created by honaf on 16/2/29. 24 | * dialog 25 | */ 26 | public class MyDialogModule extends ReactContextBaseJavaModule 27 | { 28 | public ReactContext currentReactContext = null; 29 | public MyDialogModule(ReactApplicationContext reactContext) { 30 | super(reactContext); 31 | currentReactContext = reactContext; 32 | } 33 | @Override 34 | public String getName() { 35 | return "MyDialogModule"; 36 | } 37 | 38 | /** 39 | * 弹出类似于相册 40 | * @param array 41 | * @param callback 42 | */ 43 | @ReactMethod 44 | public void actionSheet(ReadableArray array, final Callback callback){ 45 | final String[] str = new String[array.size()]; 46 | for (int i = 0; i JavaScript 118 | // Boolean -> Bool 119 | // Integer -> Number 120 | // Double -> Number 121 | // Float -> Number 122 | // String -> String 123 | // Callback -> function 124 | // ReadableMap -> Object 125 | // ReadableArray -> Array 126 | 127 | 128 | } 129 | -------------------------------------------------------------------------------- /android/src/main/java/com/honaf/dialog/MyDialogPackage.java: -------------------------------------------------------------------------------- 1 | package com.honaf.dialog; 2 | 3 | 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.bridge.JavaScriptModule; 6 | import com.facebook.react.bridge.NativeModule; 7 | import com.facebook.react.bridge.ReactApplicationContext; 8 | import com.facebook.react.uimanager.ViewManager; 9 | 10 | import java.util.ArrayList; 11 | import java.util.Collections; 12 | import java.util.List; 13 | 14 | /** 15 | * Created by apple on 16/2/29. 16 | */ 17 | public class MyDialogPackage implements ReactPackage { 18 | @Override 19 | public List createNativeModules(ReactApplicationContext reactContext) { 20 | List modules = new ArrayList<>(); 21 | modules.add(new MyDialogModule(reactContext)); 22 | return modules; 23 | } 24 | 25 | @Override 26 | public List> createJSModules() { 27 | return Collections.emptyList(); 28 | } 29 | 30 | @Override 31 | public List createViewManagers(ReactApplicationContext reactContext) { 32 | return Collections.emptyList(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /android/src/main/res/drawable/bg_home_search.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /android/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Dialog 3 | 4 | -------------------------------------------------------------------------------- /android_actionSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sincethere/react-native-dialog/49b79add044864d8dd03404a3a137f7b13ad74a1/android_actionSheet.png -------------------------------------------------------------------------------- /android_inputDialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sincethere/react-native-dialog/49b79add044864d8dd03404a3a137f7b13ad74a1/android_inputDialog.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dialog 3 | * Author:honaf 4 | */ 5 | 'use strict'; 6 | 7 | import { 8 | Platform, 9 | } from 'react-native'; 10 | 11 | let dialog = null; 12 | 13 | if (Platform.OS == 'ios') { 14 | dialog = require('./MyIosDialog'); 15 | } else { 16 | dialog = require('./MyAndroidDialog'); 17 | } 18 | 19 | module.exports = dialog; -------------------------------------------------------------------------------- /ios_actionSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sincethere/react-native-dialog/49b79add044864d8dd03404a3a137f7b13ad74a1/ios_actionSheet.png -------------------------------------------------------------------------------- /ios_inputDialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sincethere/react-native-dialog/49b79add044864d8dd03404a3a137f7b13ad74a1/ios_inputDialog.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-dialog", 3 | "version": "1.0.7", 4 | "description": "a dialog support react native ios android", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "make test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/honaf/react-native-dialog.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "native", 16 | "dialog" 17 | ], 18 | "author": { 19 | "name": "honaf" 20 | }, 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/honaf/react-native-dialog/issues" 24 | }, 25 | "homepage": "https://github.com/honaf/react-native-dialog#readme", 26 | "readme": "ERROR: No README data found!", 27 | "_id": "react-native-dialog@1.0.7", 28 | "_shasum": "ec701aeb5abc8679ec4ce2d07de8bcc73958355d", 29 | "_from": "react-native-dialog@*" 30 | } 31 | --------------------------------------------------------------------------------