Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
R
react-native-syan-image-picker
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
OpenSource
react-native-syan-image-picker
Commits
6f2108ee
Unverified
Commit
6f2108ee
authored
Aug 13, 2019
by
jearyVon
Committed by
GitHub
Aug 13, 2019
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #1 from jearyvon/fix-png-bug
Fix png bug
parents
bc2fe84f
46a7ab8e
Changes
5
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
242 additions
and
152 deletions
+242
-152
README.md
README.md
+58
-2
RNSyanImagePickerModule.java
...src/main/java/com/syanpicker/RNSyanImagePickerModule.java
+158
-148
index.js
index.js
+13
-0
RNSyanImagePicker.m
ios/RNSyanImagePicker.m
+12
-1
package.json
package.json
+1
-1
No files found.
README.md
View file @
6f2108ee
...
@@ -117,6 +117,33 @@ android {
...
@@ -117,6 +117,33 @@ android {
...
...
}
}
```
```
##### 4、拍照前动态获取权限
```
js
requestPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: '申请读写手机存储权限',
message:
'一个很牛逼的应用想借用你的摄像头,' +
'然后你就可以拍出酷炫的皂片啦。',
buttonNeutral: '等会再问我',
buttonNegative: '不行',
buttonPositive: '好吧',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('现在你获得摄像头权限了');
} else {
console.log('用户并不给你');
}
} catch (err) {
console.warn(err);
}
};
```
### 注意安装运行报错
### 注意安装运行报错
1. 检查自动 link 是否成功
1. 检查自动 link 是否成功
...
@@ -135,13 +162,16 @@ android {
...
@@ -135,13 +162,16 @@ android {
### Android
### Android
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import com.reactlibrary.RNSyanImagePickerPackage;` to the imports at the top of the file
- Add `import com.reactlibrary.RNSyanImagePickerPackage;` to the imports at the top of the file
- Add `new RNSyanImagePickerPackage()` to the list returned by the `getPackages()` method
- Add `new RNSyanImagePickerPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
2. Append the following lines to `android/settings.gradle`:
```gradle
```gradle
include ':react-native-syan-image-picker'
include ':react-native-syan-image-picker'
project(':react-native-syan-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-syan-image-picker/android')
project(':react-native-syan-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-syan-image-picker/android')
```
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```gradle
```gradle
compile project(':react-native-syan-image-picker')
compile project(':react-native-syan-image-picker')
...
@@ -167,8 +197,14 @@ showCropCircle | bool | 是 | false | 是否显示圆形裁剪区
...
@@ -167,8 +197,14 @@ showCropCircle | bool | 是 | false | 是否显示圆形裁剪区
circleCropRadius | float | 是 | screenW * 0.5 | 圆形裁剪半径,默认屏幕宽度一半
circleCropRadius | float | 是 | screenW * 0.5 | 圆形裁剪半径,默认屏幕宽度一半
showCropFrame | bool | 是 | true | 是否显示裁剪区域
showCropFrame | bool | 是 | true | 是否显示裁剪区域
showCropGrid | bool | 是 | false | 是否隐藏裁剪区域网格
showCropGrid | bool | 是 | false | 是否隐藏裁剪区域网格
quality | int | 是 | 90 | 压缩质量
quality | int | 是 | 90 | 压缩质量(安卓无效,固定鲁班压缩)
minimumCompressSize | int | 是 | 100 | 小于100kb的图片不压缩(Android)
enableBase64 | bool | 是 | false | 是否返回base64编码,默认不返回
enableBase64 | bool | 是 | false | 是否返回base64编码,默认不返回
freeStyleCropEnabled | bool | 是 | false | 裁剪框是否可拖拽(Android)
rotateEnabled | bool | 是 | true | 裁剪是否可旋转图片(Android)
scaleEnabled | bool | 是 | true | 裁剪是否可放大缩小图片(Android)
## 返回结果说明
## 返回结果说明
以 `Callback` 形式调用时,返回的第一个参数为错误对象,第二个才是图片数组:
以 `Callback` 形式调用时,返回的第一个参数为错误对象,第二个才是图片数组:
...
@@ -253,7 +289,27 @@ STImagePicke.removeAllPhoto()
...
@@ -253,7 +289,27 @@ STImagePicke.removeAllPhoto()
```
```
### 调用相机
### 调用相机
相机功能调用 `openCamera` 方法,一样支持 Callback 和 Promise 两种形式,结果参数也保持一致。
相机功能调用方法,一样支持 Callback 和 Promise 两种形式,结果参数也保持一致。
```
javascript
//Callback方式
SyanImagePicker.openCamera(options, (err, photos) => {
if (err) {
// 取消选择
return;
}
// 选择成功,渲染图片
// ...
})
//Promise方式
SYImagePicker.asyncOpenCamera(options)
.then(()=>{
...
})
.catch(()=>{
...
})
```
### 删除缓存
### 删除缓存
```
javascript
```
javascript
...
...
android/src/main/java/com/syanpicker/RNSyanImagePickerModule.java
View file @
6f2108ee
This diff is collapsed.
Click to expand it.
index.js
View file @
6f2108ee
...
@@ -21,6 +21,11 @@ const defaultOptions = {
...
@@ -21,6 +21,11 @@ const defaultOptions = {
circleCropRadius
:
~~
(
width
/
4
),
// 圆形裁剪半径,默认屏幕宽度一半
circleCropRadius
:
~~
(
width
/
4
),
// 圆形裁剪半径,默认屏幕宽度一半
showCropFrame
:
true
,
// 是否显示裁剪区域,默认true
showCropFrame
:
true
,
// 是否显示裁剪区域,默认true
showCropGrid
:
false
,
// 是否隐藏裁剪区域网格,默认false
showCropGrid
:
false
,
// 是否隐藏裁剪区域网格,默认false
freeStyleCropEnabled
:
false
,
// 裁剪框是否可拖拽
rotateEnabled
:
true
,
// 裁剪是否可旋转图片
scaleEnabled
:
true
,
// 裁剪是否可放大缩小图片
compress
:
true
,
minimumCompressSize
:
100
,
// 小于100kb的图片不压缩
quality
:
90
,
// 压缩质量
quality
:
90
,
// 压缩质量
enableBase64
:
false
,
// 是否返回base64编码,默认不返回
enableBase64
:
false
,
// 是否返回base64编码,默认不返回
allowPickingOriginalPhoto
:
false
,
allowPickingOriginalPhoto
:
false
,
...
@@ -102,6 +107,14 @@ export default {
...
@@ -102,6 +107,14 @@ export default {
RNSyanImagePicker
.
openCamera
(
optionObj
,
callback
)
RNSyanImagePicker
.
openCamera
(
optionObj
,
callback
)
},
},
asyncOpenCamera
(
options
)
{
const
optionObj
=
{
...
defaultOptions
,
...
options
,
};
return
RNSyanImagePicker
.
asyncOpenCamera
(
optionObj
);
},
/**
/**
* 清除缓存
* 清除缓存
*/
*/
...
...
ios/RNSyanImagePicker.m
View file @
6f2108ee
...
@@ -55,7 +55,7 @@ RCT_EXPORT_METHOD(showImagePicker:(NSDictionary *)options
...
@@ -55,7 +55,7 @@ RCT_EXPORT_METHOD(showImagePicker:(NSDictionary *)options
RCT_REMAP_METHOD
(
asyncShowImagePicker
,
RCT_REMAP_METHOD
(
asyncShowImagePicker
,
options
:
(
NSDictionary
*
)
options
options
:
(
NSDictionary
*
)
options
r
esolver
:
(
RCTPromiseResolveBlock
)
resolve
showImagePickerR
esolver
:
(
RCTPromiseResolveBlock
)
resolve
rejecter
:
(
RCTPromiseRejectBlock
)
reject
)
{
rejecter
:
(
RCTPromiseRejectBlock
)
reject
)
{
self
.
cameraOptions
=
options
;
self
.
cameraOptions
=
options
;
self
.
resolveBlock
=
resolve
;
self
.
resolveBlock
=
resolve
;
...
@@ -72,6 +72,17 @@ RCT_EXPORT_METHOD(openCamera:(NSDictionary *)options callback:(RCTResponseSender
...
@@ -72,6 +72,17 @@ RCT_EXPORT_METHOD(openCamera:(NSDictionary *)options callback:(RCTResponseSender
[
self
takePhoto
];
[
self
takePhoto
];
}
}
RCT_REMAP_METHOD
(
asyncOpenCamera
,
options
:
(
NSDictionary
*
)
options
openCameraResolver
:
(
RCTPromiseResolveBlock
)
resolve
rejecter
:
(
RCTPromiseRejectBlock
)
reject
)
{
self
.
cameraOptions
=
options
;
self
.
resolveBlock
=
resolve
;
self
.
rejectBlock
=
reject
;
self
.
callback
=
nil
;
[
self
takePhoto
];
}
RCT_EXPORT_METHOD
(
deleteCache
)
{
RCT_EXPORT_METHOD
(
deleteCache
)
{
NSFileManager
*
fileManager
=
[
NSFileManager
defaultManager
];
NSFileManager
*
fileManager
=
[
NSFileManager
defaultManager
];
[
fileManager
removeItemAtPath
:
[
NSString
stringWithFormat
:
@"%@ImageCaches"
,
NSTemporaryDirectory
()]
error
:
nil
];
[
fileManager
removeItemAtPath
:
[
NSString
stringWithFormat
:
@"%@ImageCaches"
,
NSTemporaryDirectory
()]
error
:
nil
];
...
...
package.json
View file @
6f2108ee
{
{
"name"
:
"react-native-syan-image-picker"
,
"name"
:
"react-native-syan-image-picker"
,
"version"
:
"0.3.
4
"
,
"version"
:
"0.3.
7
"
,
"description"
:
"React-Native 多图片选择 支持裁剪 压缩"
,
"description"
:
"React-Native 多图片选择 支持裁剪 压缩"
,
"main"
:
"index.js"
,
"main"
:
"index.js"
,
"scripts"
:
{
"scripts"
:
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment