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
f1369e32
Commit
f1369e32
authored
Mar 30, 2018
by
cookiej
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新README.md说明
parent
35cb547d
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
185 additions
and
102 deletions
+185
-102
LICENSE
LICENSE
+21
-0
README.md
README.md
+163
-101
package.json
package.json
+1
-1
No files found.
LICENSE
0 → 100644
View file @
f1369e32
MIT License
Copyright (c) 2018 syanbo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
README.md
View file @
f1369e32
# react-native-syan-image-picker
# react-native-syan-image-picker
[

](https://www.npmjs.com/package/react-native-syan-image-picker)
[

](https://www.npmjs.com/package/react-native-syan-image-picker)
[

](https://www.npmjs.com/package/react-native-syan-image-picker)
[

](https://github.com/syanbo/react-native-syan-image-picker/blob/master/LICENSE)
## 功能介绍
## 功能介绍
多图片选择器
基于已有原生第三方框架封装的多图片选择组件,适用于 React Native App。
### 原生框架依赖
> * Android: [PictureSelector 2.2.0](https://github.com/LuckSiege/PictureSelector) - by [LuckSiege](https://github.com/LuckSiege)
> * iOS:[TZImagePickerController 2.0.0.4](https://github.com/banchichen/TZImagePickerController) - by [banchichen](https://github.com/banchichen)
Android 基于
[
PictureSelector 2.2.0
](
https://github.com/LuckSiege/PictureSelector
)
### 功能特点
*
支持 iOS、Android 两端
*
支持单选、多选,类型包括图片、GIF
*
可自定义裁剪区域大小,支持圆形裁剪
*
可设置压缩质量
*
支持返回图片 base64 编码
iOS 基于
[
TZImagePickerController 2.0.0.4
](
https://github.com/banchichen/TZImagePickerController
)
## 运行截图




...
@@ -15,11 +29,22 @@
...
@@ -15,11 +29,22 @@
## 安装使用
## 安装使用
`$ npm install react-native-syan-image-picker --save`
### 安装
```
// Step 1 基于 npm
npm install react-native-syan-image-picker --save
// 或是 yarn
yarn add react-native-syan-image-picker
`$ react-native link react-native-syan-image-picker`
// Step 2 执行 link
react-native link react-native-syan-image-picker
### iOS
```
### 其他配置
#### iOS
##### 1、添加原生框架中所需的 `bundle` 文件:
-
TARGETS -> Build Phases -> Copy Bundle Resources
-
TARGETS -> Build Phases -> Copy Bundle Resources
点击"+"按钮,在弹出的窗口中点击“Add Other”按钮,选择
点击"+"按钮,在弹出的窗口中点击“Add Other”按钮,选择
...
@@ -27,6 +52,8 @@
...
@@ -27,6 +52,8 @@
node_modules/react-native-syan-image-picker/ios/TZImagePickerController/TZImagePickerController.bundle
node_modules/react-native-syan-image-picker/ios/TZImagePickerController/TZImagePickerController.bundle
```
```
##### 2、添加相册相关权限:
- 项目目录->Info.plist->增加3项
- 项目目录->Info.plist->增加3项
```
```
"Privacy - Camera Usage Description
"Privacy - Camera Usage Description
...
@@ -40,13 +67,14 @@
...
@@ -40,13 +67,14 @@
Privacy - Location When In Use Usage Description 我们需要通过您的地理位置信息获取您周边的相关数据
Privacy - Location When In Use Usage Description 我们需要通过您的地理位置信息获取您周边的相关数据
```
```
##### 3、中文适配:
- 添加中文 PROJECT -> Info -> Localizations 点击"+"按钮,选择Chinese(Simplified)
- 添加中文 PROJECT -> Info -> Localizations 点击"+"按钮,选择Chinese(Simplified)
### Android
###
#
Android
- android 下build.gradle文件添加 maven { url "https://jitpack.io" }
##### 1、在 `build.gradle` 中添加 `maven` 配置:
```
```
gradle
allprojects {
allprojects {
repositories {
repositories {
mavenLocal()
mavenLocal()
jcenter()
jcenter()
...
@@ -56,77 +84,86 @@
...
@@ -56,77 +84,86 @@
url "$rootDir/../node_modules/react-native/android"
url "$rootDir/../node_modules/react-native/android"
}
}
}
}
}
}
```
```
- 添加权限
##### 2、在 `AndroidManifest.xml` 中添加权限:
```
```
xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
```
```
- 更新到PictureSelector 2.2.0
##### 3、更新到 PictureSelector 2.2.0:
```
```
gradle
在安卓文件app下修改build.gradle
// app/build.gradle
android
{
compileSdkVersion
26
compileSdkVersion
26
buildToolsVersion
"26.0.3"
buildToolsVersion
"26.0.3"
...
}
```
```
- 注意
安装运行报错
###
注意
安装运行报错
1. 检查自动
link
是否成功
1
.
检查自动
link
是否成功
2. 使用
Android Studio 查看MainApplication文件是否添加new RNSyanImagePickerPackage()
2
.
使用
Android
Studio
查看
`
MainApplication
.
java
`
文件是否添加
`
new
RNSyanImagePickerPackage
()
`
3. 使用
Android Studio 打开项目检查Gradle
是否同步完成
3
.
使用
Android
Studio
打开项目检查
Gradle
是否同步完成
4. 可以运行
[ImagePickerExample](https://github.com/syanbo/ImagePickerExample) 该demo,测试Android7.0,6.0
拍照选图都为正常
4
.
可以运行
[
ImagePickerExample
](
https:
//github.com/syanbo/ImagePickerExample) 该 Demo,测试 Android 7.0,6.0
拍照选图都为正常
##
link
失败手动添加
##
link
失败手动添加
###
#
iOS
###
iOS
1
.
In
XCode
,
in
the
project
navigator
,
right
click
`
Libraries
`
➜
`
Add
Files
to
[
your
project
'
s
name
]
`
1
.
In
XCode
,
in
the
project
navigator
,
right
click
`
Libraries
`
➜
`
Add
Files
to
[
your
project
'
s
name
]
`
2
.
Go
to
`
node_modules
`
➜
`
react
-
native
-
syan
-
image
-
picker
`
and
add
`
RNSyanImagePicker
.
xcodeproj
`
2
.
Go
to
`
node_modules
`
➜
`
react
-
native
-
syan
-
image
-
picker
`
and
add
`
RNSyanImagePicker
.
xcodeproj
`
3
.
In
XCode
,
in
the
project
navigator
,
select
your
project
.
Add
`
libRNSyanImagePicker
.
a
`
to
your
project
'
s
`
Build
Phases
`
➜
`
Link
Binary
With
Libraries
`
3
.
In
XCode
,
in
the
project
navigator
,
select
your
project
.
Add
`
libRNSyanImagePicker
.
a
`
to
your
project
'
s
`
Build
Phases
`
➜
`
Link
Binary
With
Libraries
`
4
.
Run
your
project
(
`
Cmd
+
R
`
)<
4
.
Run
your
project
(
`
Cmd
+
R
`
)<
###
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
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
compile
project
(
':react-native-syan-image-picker'
)
compile
project
(
':react-native-syan-image-picker'
)
```
```
##
运行示例
##
运行示例
[ImagePickerExample](https://github.com/syanbo/ImagePickerExample)
相关
Demo
见
[
ImagePickerExample
](
https:
//github.com/syanbo/ImagePickerExample)。以下为入口文件,可参考使用方式的注释:
```
```
javascript
import SYImagePicker from 'react-native-syan-image-picker'
// react-native-syan-image-picker/index.js
import {
NativeModules,
Dimensions,
} from 'react-native';
/
**
const { RNSyanImagePicker } = NativeModules;
const { width } = Dimensions.get('window');
/
**
*
默认参数
*
默认参数
*
/
*
/
const o
ptions = {
const defaultO
ptions = {
imageCount: 6, // 最大选择图片数目,默认6
imageCount: 6, // 最大选择图片数目,默认6
isCamera: true, // 是否允许用户在内部拍照,默认true
isCamera: true, // 是否允许用户在内部拍照,默认true
isCrop: false, // 是否允许裁剪,默认false
isCrop: false, // 是否允许裁剪,默认false, imageCount 为1才生效
CropW: ~~(width
*
0.6), // 裁剪宽度,默认屏幕宽度60%
CropW: ~~(width
*
0.6), // 裁剪宽度,默认屏幕宽度60%
CropH: ~~(width
*
0.6), // 裁剪高度,默认屏幕宽度60%
CropH: ~~(width
*
0.6), // 裁剪高度,默认屏幕宽度60%
isGif: false, // 是否允许选择GIF,默认false,暂无回调GIF数据
isGif: false, // 是否允许选择GIF,默认false,暂无回调GIF数据
showCropCircle: false, // 是否显示圆形裁剪区域,默认false
showCropCircle: false, // 是否显示圆形裁剪区域,默认false
circleCropRadius: width/2
// 圆形裁剪半径,默认屏幕宽度一半
circleCropRadius: width/2,
// 圆形裁剪半径,默认屏幕宽度一半
showCropFrame: true, // 是否显示裁剪区域,默认true
showCropFrame: true, // 是否显示裁剪区域,默认true
showCropGrid: false, // 是否隐藏裁剪区域网格,默认false
showCropGrid: false, // 是否隐藏裁剪区域网格,默认false
quality: 90 // 压缩质量
quality: 90 // 压缩质量
};
};
export default {
/
**
/
**
*
以Callback形式调用
*
以Callback形式调用
*
1、相册参数暂时只支持默认参数中罗列的属性;
*
1、相册参数暂时只支持默认参数中罗列的属性;
...
@@ -134,7 +171,7 @@ import SYImagePicker from 'react-native-syan-image-picker'
...
@@ -134,7 +171,7 @@ import SYImagePicker from 'react-native-syan-image-picker'
*
1)选择图片成功,err为null,selectedPhotos为选中的图片数组
*
1)选择图片成功,err为null,selectedPhotos为选中的图片数组
*
2)取消时,err返回"取消",selectedPhotos将为undefined
*
2)取消时,err返回"取消",selectedPhotos将为undefined
*
按需判断各参数值,确保调用正常,示例使用方式:
*
按需判断各参数值,确保调用正常,示例使用方式:
*
SYImagePicker.
showImagePicker(options, (err, selectedPhotos) => {
*
showImagePicker(options, (err, selectedPhotos) => {
*
if (err) {
*
if (err) {
*
// 取消选择
*
// 取消选择
*
return;
*
return;
...
@@ -145,6 +182,13 @@ import SYImagePicker from 'react-native-syan-image-picker'
...
@@ -145,6 +182,13 @@ import SYImagePicker from 'react-native-syan-image-picker'
*
@param {Object} options 相册参数
*
@param {Object} options 相册参数
*
@param {Function} callback 成功,或失败回调
*
@param {Function} callback 成功,或失败回调
*
/
*
/
showImagePicker(options, callback) {
const optionObj = {
...defaultOptions,
...options
};
RNSyanImagePicker.showImagePicker(optionObj, callback)
},
/**
/**
* 以Promise形式调用
* 以Promise形式调用
...
@@ -172,23 +216,38 @@ import SYImagePicker from 'react-native-syan-image-picker'
...
@@ -172,23 +216,38 @@ import SYImagePicker from 'react-native-syan-image-picker'
* @param {Object} options 相册参数
* @param {Object} options 相册参数
* @return {Promise} 返回一个Promise对象
* @return {Promise} 返回一个Promise对象
*/
*/
asyncShowImagePicker(options) {
const optionObj = {
...defaultOptions,
...options,
};
return RNSyanImagePicker.asyncShowImagePicker(optionObj);
},
/**
/**
* 打开相机
* 打开相机
支持裁剪参数
* @param options
* @param options
* @param callback
* @param callback
*/
*/
* SYImagePicker.openCamera(options, (err, selectedPhotos) => {
openCamera(options, callback) {
* if (err) {
const optionObj = {
* // 取消选择
...defaultOptions,
* return;
...options
* }
};
* // 选择成功
RNSyanImagePicker.openCamera(optionObj, callback)
* })
},
/**
* 清除缓存
*/
deleteCache() {
RNSyanImagePicker.deleteCache()
}
};
```
```
## 帮助
## 帮助
加入React-Native QQ群 397885169
加入
React-Native QQ群 397885169
## 非常感谢
## 非常感谢
[
LuckSiege
](
https://github.com/LuckSiege/PictureSelector
)
[
LuckSiege
](
https://github.com/LuckSiege/PictureSelector
)
...
@@ -196,3 +255,6 @@ import SYImagePicker from 'react-native-syan-image-picker'
...
@@ -196,3 +255,6 @@ import SYImagePicker from 'react-native-syan-image-picker'
[
banchichen
](
https://github.com/banchichen/TZImagePickerController
)
[
banchichen
](
https://github.com/banchichen/TZImagePickerController
)
[
ljunb
](
https://github.com/ljunb
)
[
ljunb
](
https://github.com/ljunb
)
## 捐助
随时欢迎!!☕️☕️☕️✨✨
package.json
View file @
f1369e32
...
@@ -17,6 +17,6 @@
...
@@ -17,6 +17,6 @@
"TZImagePickerController"
,
"TZImagePickerController"
,
"Photo"
"Photo"
],
],
"author"
:
""
,
"author"
:
"
syan
"
,
"license"
:
"
MIT
"
"license"
:
"
MIT
"
}
}
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