0.0.3 • Published 4 months ago

react-native-yu-photo-album-selector v0.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

react-native-yu-photo-album-selector

react-native的照片选择组件

安装

npm

npm install react-native-yu-photo-album-selector --save

yarn

yarn add react-native-yu-photo-album-selector

IOS

在ios目录下执行pod install

pod install

Android

rn版本>=0.75.4无需额外配置

权限

IOS

在运行 iOS 10 或更高版本的设备上,需要获得用户的许可才能访问相机胶卷。NSPhotoLibraryUsageDescription在您的应用程序中添加Info.plist一个字符串,描述您的应用程序将如何使用这些数据。此密钥将显示为 Xcode 中的密钥Privacy - Photo Library Usage Description。

如果您的目标设备运行的是 iOS 11 或更高版本,您还需要NSPhotoLibraryAddUsageDescription在 中添加密钥Info.plist。使用此密钥定义一个字符串,描述您的应用将如何使用这些数据。通过将此密钥添加到Info.plist,您将能够向用户请求只写访问权限。如果您尝试在没有此权限的情况下保存到相机胶卷,您的应用将退出。

Android

需要权限才能读取和写入外部存储。 在AndroidManifest.xml中添加以下权限:

 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

使用

import {PhotoAlbumSelector} from 'react-native-yu-photo-album-selector';

type DemoType = {};

const Demo: FC<DemoType> = () => {
 
  return (
    <View style={styles.container}>
      <PhotoAlbumSelector onConfirm={(photoIdentifiers  )=>{
        console.log('选择了相册',photoIdentifiers);
      }} >
        <View>
        <Text>选择相册</Text>
        </View>
      </PhotoAlbumSelector>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
    padding: 20,
  },
});

export default Demo;

props

属性名类型必填默认值描述
onConfirm(photoIdentifiers: PhotoIdentifier[]) => voidnull确定回调函数
childrenReactNodenull自定义内容