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
4a644baf
Unverified
Commit
4a644baf
authored
Mar 31, 2018
by
少言
Committed by
GitHub
Mar 31, 2018
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update README.md
parent
48ec4fd1
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
2 additions
and
134 deletions
+2
-134
README.md
README.md
+2
-134
No files found.
README.md
View file @
4a644baf
...
@@ -22,10 +22,7 @@
...
@@ -22,10 +22,7 @@
*
支持返回图片 base64 编码
*
支持返回图片 base64 编码
## 运行截图
## 运行截图




## 安装使用
## 安装使用
...
@@ -117,133 +114,4 @@ android {
...
@@ -117,133 +114,4 @@ android {
### 注意安装运行报错
### 注意安装运行报错
1.
检查自动 link 是否成功
1.
检查自动 link 是否成功
2
.
使用
Android
Studio
查看
`
MainApplication
.
java
`
文件是否添加
`
new
RNSyanImagePickerPackage
()
`
2.
使用 Android Studio 查看
`
MainApplication
3
.
使用
Android
Studio
打开项目检查
Gradle
是否同步完成
4
.
可以运行
[
ImagePickerExample
](
https:
//github.com/syanbo/ImagePickerExample) 该 Demo,测试 Android 7.0,6.0 拍照选图都为正常
##
link
失败手动添加
###
iOS
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
`
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
`
)<
###
Android
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
`
new
RNSyanImagePickerPackage
()
`
to
the
list
returned
by
the
`
getPackages
()
`
method
2
.
Append
the
following
lines
to
`
android
/
settings
.
gradle
`
:
```
gradle
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'
)
```
3
.
Insert
the
following
lines
inside
the
dependencies
block
in
`
android
/app/
build
.
gradle
`
:
```
gradle
compile
project
(
':react-native-syan-image-picker'
)
```
##
运行示例
相关
Demo
见
[
ImagePickerExample
](
https:
//github.com/syanbo/ImagePickerExample)。
##
配置参数说明
组件调用时,支持传入一个
`
options
`
对象,可设置的属性如下:
属性名
|
类型
|
是否可选
|
默认值
|
描述
----------------
|
------
|
--------
|
-----------
|
-----------
imageCount
|
int
|
是
|
6
|
最大选择图片数目
isCamera
|
bool
|
是
|
true
|
是否允许用户在内部拍照
isCrop
|
bool
|
是
|
false
|
是否允许裁剪,
imageCount
为
1
才生效
CropW
|
int
|
是
|
screenW
*
0.6
|
裁剪宽度,默认屏幕宽度
60
%
CropH
|
int
|
是
|
screenW
*
0.6
|
裁剪高度,默认屏幕宽度
60
%
isGif
|
bool
|
是
|
false
|
是否允许选择
GIF
,暂无回调
GIF
数据
showCropCircle
|
bool
|
是
|
false
|
是否显示圆形裁剪区域
circleCropRadius
|
float
|
是
|
screenW
*
0.5
|
圆形裁剪半径,默认屏幕宽度一半
showCropFrame
|
bool
|
是
|
true
|
是否显示裁剪区域
showCropGrid
|
bool
|
是
|
false
|
是否隐藏裁剪区域网格
quality
|
int
|
是
|
90
|
压缩质量
enableBase64
|
bool
|
是
|
false
|
是否返回
base64
编码,默认不返回
##
返回结果说明
以
`
Callback
`
形式调用时,返回的第一个参数为错误对象,第二个才是图片数组:
属性名
|
类型
|
描述
----------------
|
------
|
-----------
error
|
object
|
取消拍照时不为
null
,此时
`
error
.
message
`
==
'取消'
photos
|
array
|
选择的图片数组
而以
`
Promise
`
形式调用时,则直接返回图片数组,在
`
catch
`
中去处理取消选择的情况。
下面是每张图片对象所包含的属性:
属性名
|
类型
|
描述
----------------
|
------
|
-----------
width
|
int
|
图片宽度
height
|
int
|
图片高度
uri
|
string
|
图片路径
original_uri
|
string
|
图片原始路径,仅
Android
type
|
string
|
文件类型,仅
Android
,当前只返回
`
image
`
size
|
int
|
图片大小,单位为字节
`
b
`
base64
|
string
|
图片的
base64
编码,如果
`
enableBase64
`
设置
false
,则不返回该属性
##
方法调用
###
Callback
回调形式需调用
`
showImagePicker
`
方法:
```
javascript
import SyanImagePicker from 'react-native-syan-image-picker';
SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
if (err) {
// 取消选择
return;
}
// 选择成功,渲染图片
// ...
})
```
### Promise
非回调形式则使用 `asyncShowImagePicker` 方法:
```
javascript
import SyanImagePicker from 'react-native-syan-image-picker';
// promise-then
SYImagePicker.asyncShowImagePicker(options)
.then(photos => {
// 选择成功
})
.catch(err => {
// 取消选择,err.message为"取消"
})
// async/await
handleSelectPhoto = async () => {
try {
const photos = await SYImagePicker.asyncShowImagePicker(options);
// 选择成功
} catch (err) {
// 取消选择,err.message为"取消"
}
}
```
### 调用相机
相机功能调用 `openCamera` 方法,一样支持 Callback 和 Promise 两种形式,结果参数也保持一致。
### 删除缓存
```
javascript
SYImagePicker.deleteCache();
```
## 帮助
加入 React-Native QQ群 397885169
## 非常感谢
[
LuckSiege
](
https://github.com/LuckSiege/PictureSelector
)
[
banchichen
](
https://github.com/banchichen/TZImagePickerController
)
[
ljunb
](
https://github.com/ljunb
)
## 捐赠
随时欢迎!!☕️☕️☕️✨✨
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