@tarojs/taro-rn 4.0.0-beta.0 → 4.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-rn",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.2",
   "description": "Taro RN framework",
   "main": "dist/index.js",
   "typings": "types/index.d.ts",
@@ -21,73 +21,70 @@
   "author": "O2Team",
   "license": "MIT",
   "dependencies": {
-    "@bam.tech/react-native-image-resizer": "~3.0.4",
-    "@react-native-async-storage/async-storage": "~1.17.7",
-    "@react-native-camera-roll/camera-roll": "~5.2.3",
-    "@react-native-clipboard/clipboard": "~1.11.1",
-    "@react-native-community/geolocation": "~3.0.2",
-    "@react-native-community/netinfo": "~9.3.0",
-    "babel-preset-expo": "~9.2.1",
+    "@bam.tech/react-native-image-resizer": "~3.0.5",
+    "@react-native-async-storage/async-storage": "~1.21.0",
+    "@react-native-camera-roll/camera-roll": "~7.2.0",
+    "@react-native-clipboard/clipboard": "~1.13.0",
+    "@react-native-community/geolocation": "~3.1.0",
+    "@react-native-community/netinfo": "~11.2.0",
+    "babel-preset-expo": "~10.0.0",
     "base64-js": "^1.3.0",
     "deprecated-react-native-prop-types": "^2.3.0",
-    "expo-av": "~13.2.1",
-    "expo-barcode-scanner": "~12.3.1",
-    "expo-brightness": "~11.2.1",
-    "expo-camera": "~13.2.1",
-    "expo-file-system": "~15.2.2",
-    "expo-image-picker": "~14.1.1",
-    "expo-keep-awake": "~12.0.1",
-    "expo-location": "~15.1.1",
-    "expo-sensors": "~12.1.1",
+    "expo-av": "~13.10.0",
+    "expo-barcode-scanner": "~12.9.0",
+    "expo-brightness": "~11.8.0",
+    "expo-camera": "~14.0.0",
+    "expo-file-system": "~16.0.0",
+    "expo-image-picker": "~14.7.0",
+    "expo-keep-awake": "~12.8.0",
+    "expo-location": "~16.5.1",
+    "expo-sensors": "~12.9.0",
     "nullthrows": "^1.1.1",
     "prop-types": "^15.8.1",
-    "react-native-device-info": "~10.4.0",
+    "react-native-device-info": "~10.12.0",
     "react-native-image-zoom-viewer": "^3.0.1",
-    "react-native-root-siblings": "^4.1.1",
-    "react-native-root-toast": "^3.0.1",
-    "react-native-safe-area-context": "~4.5.0",
+    "react-native-root-siblings": "^5.0.1",
+    "react-native-root-toast": "^3.5.1",
+    "react-native-safe-area-context": "~4.8.0",
     "react-native-stylekit": "^1.0.0",
-    "react-native-syan-image-picker": "0.5.3",
-    "@tarojs/runtime-rn": "4.0.0-beta.0"
+    "@tarojs/runtime-rn": "4.0.0-beta.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-env": "^7.14.5",
-    "@jest/globals": "^26.6.2",
+    "@react-native/babel-preset": "^0.73.18",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.0.1",
+    "@testing-library/react-native": "^12.4.1",
     "@types/jest": "^27.4.1",
-    "expo": "~48.0.0",
+    "expo": "~50.0.0-preview.7",
     "fbjs-scripts": "^3.0.1",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
     "jest-environment-node": "^29.5.0",
-    "jest-expo": "^48.0.2",
-    "metro-react-native-babel-preset": "^0.73.7",
+    "jest-expo": "^50.0.0",
     "mock-socket": "^7.1.0",
     "react": "18.2.0",
-    "react-native": "^0.71.3",
+    "react-native": "^0.73.1",
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
-    "@bam.tech/react-native-image-resizer": "~3.0.4",
-    "@react-native-async-storage/async-storage": "~1.17.7",
-    "@react-native-camera-roll/camera-roll": "~5.2.3",
-    "@react-native-clipboard/clipboard": "~1.11.1",
-    "@react-native-community/geolocation": "~3.0.2",
-    "@react-native-community/netinfo": "~9.3.0",
-    "expo-av": "~13.2.1",
-    "expo-barcode-scanner": "~12.3.1",
-    "expo-brightness": "~11.2.1",
-    "expo-camera": "~13.2.1",
-    "expo-file-system": "~15.2.2",
-    "expo-image-picker": "~14.1.1",
-    "expo-keep-awake": "~12.0.1",
-    "expo-location": "~15.1.1",
-    "expo-sensors": "~12.1.1",
-    "react-native-device-info": "~10.4.0",
-    "react-native-safe-area-context": "~4.5.0",
-    "react-native-syan-image-picker": "0.5.3"
+    "@bam.tech/react-native-image-resizer": "~3.0.5",
+    "@react-native-async-storage/async-storage": "~1.21.0",
+    "@react-native-camera-roll/camera-roll": "~7.2.0",
+    "@react-native-clipboard/clipboard": "~1.13.0",
+    "@react-native-community/geolocation": "~3.1.0",
+    "@react-native-community/netinfo": "~11.2.0",
+    "expo-av": "~13.10.0",
+    "expo-barcode-scanner": "~12.9.0",
+    "expo-brightness": "~11.8.0",
+    "expo-camera": "~14.0.0",
+    "expo-file-system": "~16.0.0",
+    "expo-image-picker": "~14.7.0",
+    "expo-keep-awake": "~12.8.0",
+    "expo-location": "~16.5.1",
+    "expo-sensors": "~12.9.0",
+    "react-native-device-info": "~10.12.0",
+    "react-native-safe-area-context": "~4.8.0"
   },
   "scripts": {
     "assets": "cpy 'src/**/*.png' '!src/__tests__/*' dist",
@@ -95,7 +92,7 @@
     "dev": "pnpm run assets && tsc --watch",
     "lint": "eslint .",
     "test": "jest --silent",
-    "test:ci": "jest --ci -i --silent --coverage false",
+    "test:ci": "jest --ci -i --coverage --silent",
     "test:coverage": "jest --coverage",
     "test:dev": "jest --watch",
     "script": "node ./script"

package/src/__tests__/__mock__/mockRNCCameraRoll.js

@@ -1,16 +1,7 @@
-const RNCCameraRoll = {
-  deletePhotos: jest.fn(),
-  saveToCameraRoll: jest.fn((url, { type }) => Promise.resolve(`${type}://${url}`)),
-  getPhotos: jest.fn(() => Promise.resolve()),
-}
-const RNCCameraRollPermissionModule = {
-  checkPermission: jest.fn(),
-  requestReadWritePermission: jest.fn(),
-  requestAddOnlyPermission: jest.fn(),
-  refreshPhotoSelection: jest.fn(),
+const CameraRoll = {
+  save: jest.fn((url, { type }) => Promise.resolve(`${type}://${url}`)),
 }
 
 export default {
-  RNCCameraRoll,
-  RNCCameraRollPermissionModule,
+  CameraRoll,
 }

package/src/__tests__/__snapshots__/scanCode.test.tsx.snap

@@ -15,33 +15,28 @@ exports[`scanCode should render scanCode success 1`] = `
     ]
   }
 >
-  <ViewManagerAdapter_ExponentCamera
+  <ViewManagerAdapter_ExpoCamera
+    barCodeScannerEnabled={true}
+    barCodeScannerSettings={
+      {
+        "barCodeTypes": [],
+      }
+    }
+    faceDetectorSettings={{}}
+    focusDepth={0}
     onBarCodeScanned={[Function]}
     onCameraReady={[Function]}
     onFacesDetected={[Function]}
     onMountError={[Function]}
     onPictureSaved={[Function]}
-    proxiedProperties={
-      {
-        "autoFocus": undefined,
-        "barCodeScannerEnabled": true,
-        "barCodeScannerSettings": {
-          "barCodeTypes": [],
-        },
-        "faceDetectorSettings": {},
-        "flashMode": undefined,
-        "focusDepth": 0,
-        "type": undefined,
-        "whiteBalance": undefined,
-        "zoom": 0,
-      }
-    }
+    onResponsiveOrientationChanged={[Function]}
     style={
       {
         "height": 1334,
         "width": 750,
       }
     }
+    zoom={0}
   />
   <View
     accessibilityLabel="Close"

package/src/__tests__/clipboard.test.ts

@@ -12,7 +12,7 @@ const Taro = {
 describe('clipboard', () => {
   describe('setClipboardData', () => {
     test('should set value into Clipboard', async () => {
-      const data = 'foo'
+      const data = 'mockString'
       const success = jest.fn()
       const fail = jest.fn()
       const complete = jest.fn()
@@ -63,7 +63,7 @@ describe('clipboard', () => {
 
   describe('getClipboardData', () => {
     test('可以获得正确的剪切板数据', async () => {
-      const data = 'hey!hey!hey!'
+      const data = 'mockString'
       const success = jest.fn()
       const fail = jest.fn()
       const complete = jest.fn()

package/src/lib/chooseImage/index.ts

@@ -1,157 +1,33 @@
-import SYImagePicker from 'react-native-syan-image-picker'
-
-import { shouldBeObject } from '../../utils'
+import { chooseMedia, MEDIA_TYPE } from '../media'
 import { showActionSheet } from '../showActionSheet'
 
-const res = { errMsg: 'chooseImage:ok' }
-const defaultOptions = {
-  count: 9,
-  sizeType: ['original', 'compressed'],
-  sourceType: ['album', 'camera']
-}
-
-function getRes(images) {
-  const tempFilePaths: string[] = []
-  const tempFiles: any[] = []
-  images.forEach((item: any) => {
-    tempFilePaths.push(item.uri)
-    tempFiles.push({
-      path: item.uri,
-      size: item.size
-    })
-  })
-  return { tempFilePaths, tempFiles }
-}
-
-function openCamera(options: Taro.chooseImage.Option): Promise<Taro.chooseImage.SuccessCallbackResult> {
-  const { success, fail, complete } = options
-  return new Promise((resolve, reject) => {
-    SYImagePicker.openCamera({
-      compressFocusAlpha: true
-    }, (err, photo: any) => {
-      if (err) {
-        const res = {
-          errMsg: err
-        }
-        fail?.(res)
-        complete?.(res)
-        reject(res)
-      } else {
-        try {
-          const data = Object.assign({}, getRes(photo), res)
-          success?.(data)
-          complete?.(data)
-          resolve(data)
-        } catch (error) {
-          // 错误
-          reject(error)
-        }
-      }
-    })
-  })
-}
-
-// NOTE: 调用此函数会改变图片的像素尺寸
-function openPicker(options: Taro.chooseImage.Option): Promise<Taro.chooseImage.SuccessCallbackResult> {
-  const { count: imageCount, sizeType = [],success, complete, fail } = options
-  return new Promise((resolve, reject) => {
-    // NOTE：react-native-syan-image-picker 暂不支持 Android 端压缩
-    SYImagePicker.showImagePicker({
-      compressFocusAlpha: true,
-      imageCount,
-      quality: sizeType[0] === 'compressed' ? 70 : 90,
-    }, (err, photos: any) => {
-      if (err) {
-        const res = {
-          errMsg: err
-        }
-        fail?.(res)
-        complete?.(res)
-        reject(res)
-      } else {
-        try {
-          const data = Object.assign({}, getRes(photos), res)
-          success?.(data)
-          complete?.(data)
-          resolve(data)
-        } catch (error) {
-          reject(error)
-        }
-      }
-    })
-  })
+export function chooseImage(opts: Taro.chooseImage.Option): Promise<any> {
+  const {
+    sourceType = ['album', 'camera'],
+  } = opts
+  if(sourceType?.includes('camera') && sourceType?.includes('album')) {
+    return showImagePicker(opts)
+  } else if (sourceType?.includes('camera')) {
+    return chooseMedia({...opts, sourceType: ['camera']}, MEDIA_TYPE.IMAGES)
+  }
+  return chooseMedia({...opts, sourceType: ['album']}, MEDIA_TYPE.IMAGES)
 }
 
-/**
- * @description Display the image picker.
- * @param options
- * @returns {Promise}
- */
-function showImagePicker(options: Taro.chooseImage.Option):Promise<Taro.chooseImage.SuccessCallbackResult> {
+async function showImagePicker(options: Taro.chooseImage.Option):Promise<any> {
   const { fail, complete } = options
-  return new Promise((resolve, reject) => {
-    showActionSheet({
+  try {
+    const res = await showActionSheet({
       itemList: ['拍照', '从手机相册选择'],
-      success(res) {
-        console.log(res.tapIndex)
-        if (res.tapIndex === 0) {
-          // 不添加 setTimeout 会有一定概率卡死，肯能是与 sibling.destroy() 冲突
-          setTimeout(() => {
-            openCamera(options).then(res => {
-              resolve(res)
-            }).catch(e => {
-              fail?.({ errMsg: `chooseImage:${e.message}` })
-              complete?.({ errMsg: `chooseImage:${e.message}` })
-              reject(new Error(`chooseImage:${e.message}`))
-            })
-          }, 100)
-        }
-        if (res.tapIndex === 1) {
-          setTimeout(() => {
-            openPicker(options).then(res => {
-              resolve(res)
-            }).catch(e => {
-              fail?.({ errMsg: `chooseImage:${e.message}` })
-              complete?.({ errMsg: `chooseImage:${e.message}` })
-              reject(new Error(`chooseImage:${e.message}`))
-            })
-          }, 100)
-        }
-      },
-      fail(res) {
-        console.log('error: ', res.errMsg)
-      }
     })
-  })
-}
-
-/**
- * @deprecated
- * @description 从本地相册选择图片或使用相机拍照。
- *  sizeType ❌
- * @param options
- * @returns {Promise<*>}
- */
-export function chooseImage(options: Taro.chooseImage.Option): Promise<Taro.chooseImage.SuccessCallbackResult> {
-  // options must be an Object
-  const isObject = shouldBeObject(options)
-  if (!isObject.res) {
-    const res = { errMsg: `chooseImage${isObject.msg}` }
-    console.error(res.errMsg)
-    return Promise.reject(res)
-  }
-
-  options = Object.assign({}, defaultOptions, options)
-  const { sourceType } = options
-
-  switch (JSON.stringify(sourceType)) {
-    case '[\'camera\']':
-    case '["camera"]':
-      return openCamera(options)
-    case '[\'album\']':
-    case '["album"]':
-      return openPicker(options)
-    default:
-      return showImagePicker(options)
+    if (res.tapIndex === 0) {
+      return chooseMedia({...options, sourceType: ['camera']}, MEDIA_TYPE.IMAGES)
+    }
+    if (res.tapIndex === 1) {
+      return chooseMedia({...options, sourceType: ['album']}, MEDIA_TYPE.IMAGES)
+    }
+  } catch (err) {
+    const res = { errMsg: 'chooseImage: fail' }
+    fail?.(res)
+    complete?.(res)
   }
 }

package/src/lib/chooseVideo/index.ts

@@ -1,60 +1,35 @@
 import { chooseMedia, MEDIA_TYPE } from '../media'
 import { showActionSheet } from '../showActionSheet'
 
-/**
- * 拍摄视频或从手机相册中选视频。
- * @param {Object} opts
- * @param {Array} [opts.sourceType=['album', 'camera']] ✔
- * @param {boolean} [opts.compressed=true] ✔
- * @param {number} [opts.maxDuration=60] - 拍摄视频最长拍摄时间，单位秒 ✖
- * @param {string} [opts.camera='back'] - 默认拉起的是前置或者后置摄像头。✖
- * @returns {Promise<*>}
- */
 export function chooseVideo(opts: Taro.chooseVideo.Option): Promise<any> {
-  const { sourceType, compressed } = opts
+  const {
+    sourceType = ['album', 'camera'],
+    compressed
+  } = opts
   opts = Object.assign(opts, { sizeType: compressed ? ['compressed'] : [] })
-  switch (JSON.stringify(sourceType)) {
-    case '[\'camera\']':
-    case '["camera"]':
-      return chooseMedia({...opts, sourceType: ['camera']}, MEDIA_TYPE.VIDEOS)
-    case '[\'album\']':
-    case '["album"]':
-      return chooseMedia({...opts, sourceType: ['album']}, MEDIA_TYPE.VIDEOS)
-    default:
-      return showVideoPicker(opts)
+  if(sourceType?.includes('camera') && sourceType?.includes('album')) {
+    return showVideoPicker(opts)
+  } else if (sourceType?.includes('camera')) {
+    return chooseMedia({...opts, sourceType: ['camera']}, MEDIA_TYPE.VIDEOS)
   }
+  return chooseMedia({...opts, sourceType: ['album']}, MEDIA_TYPE.VIDEOS)
 }
 
-/**
- * 视频选择器
- * @param options
- * @returns {Promise}
- */
-function showVideoPicker(options: Taro.chooseVideo.Option):any {
+async function showVideoPicker(options: Taro.chooseVideo.Option):Promise<any> {
   const { fail, complete } = options
-  return new Promise((resolve, reject) => { 
-    showActionSheet({
+  try {
+    const res = await showActionSheet({
       itemList: ['拍摄', '从手机相册选择'],
-      success: function (res) {
-        if (res.tapIndex === 0) {
-          resolve(chooseMedia({...options, sourceType: ['camera']}, MEDIA_TYPE.VIDEOS))
-        }
-        if (res.tapIndex === 1) {
-          resolve(chooseMedia({...options, sourceType: ['album']}, MEDIA_TYPE.VIDEOS))
-        }
-      },
-      fail: function () {
-        const res = { errMsg: 'chooseVideo:fail cancel' }
-        reject(res)
-      }
-    }).catch(err => {
-      console.log('error: ', err.errMsg)
-      if (/showActionSheet:fail cancel/.test(err.errMsg)) {
-        const res = { errMsg: 'chooseVideo:fail cancel' }
-        fail?.(res)
-        complete?.(res)
-        reject(res)
-      }
     })
-  })
+    if (res.tapIndex === 0) {
+      return chooseMedia({...options, sourceType: ['camera']}, MEDIA_TYPE.VIDEOS)
+    }
+    if (res.tapIndex === 1) {
+      return chooseMedia({...options, sourceType: ['album']}, MEDIA_TYPE.VIDEOS)
+    }
+  } catch (err) {
+    const res = { errMsg: 'chooseVideo: fail' }
+    fail?.(res)
+    complete?.(res)
+  }
 }

package/src/lib/file.ts

@@ -2,7 +2,7 @@ import * as FileSystem from 'expo-file-system'
 import { Platform } from 'react-native'
 import { shouldBeObject, successHandler, errorHandler } from '../utils'
 
-interface Func{
+interface Func {
   (arg: any): void
 }
 

package/src/lib/media.ts

@@ -28,15 +28,17 @@ export async function saveMedia(opts: Taro.saveImageToPhotosAlbum.Option | Taro.
   }
 }
 
-export async function chooseMedia(opts: Taro.chooseImage.Option | Taro.chooseVideo.Option, mediaTypes: string): Promise<TaroGeneral.CallbackResult> {
+export async function chooseMedia(opts: Taro.chooseImage.Option | Taro.chooseVideo.Option, mediaTypes: any): Promise<TaroGeneral.CallbackResult> {
   if (!opts || typeof opts !== 'object') {
     opts = {}
   }
-  const { sizeType = [], sourceType = [], success, fail, complete, maxDuration } = opts as any
+  const { sizeType = [], sourceType = [], success, fail, complete, maxDuration, count } = opts as any
   const options = {
     mediaTypes,
     quality: sizeType[0] === 'compressed' ? 0.7 : 1,
-    videoMaxDuration: maxDuration
+    videoMaxDuration: maxDuration,
+    allowsMultipleSelection: (mediaTypes === MEDIA_TYPE.IMAGES && count > 1) ? true : false,
+    selectionLimit: mediaTypes === MEDIA_TYPE.VIDEOS ? 1 : (count || 9),
   }
   const isCamera = sourceType[0] === 'camera'
   const { granted } = isCamera ? await requestCameraPermissionsAsync() : await ImagePicker.requestMediaLibraryPermissionsAsync()
@@ -47,22 +49,24 @@ export async function chooseMedia(opts: Taro.chooseImage.Option | Taro.chooseVid
 
   let launchMediaAsync = isCamera ? ImagePicker.launchCameraAsync : ImagePicker.launchImageLibraryAsync
   try {
-    const resp: any = await launchMediaAsync(options as any)
-    const { uri, duration, width, height } = resp
-    resp.path = uri
-
+    const resp = await launchMediaAsync(options)
     let res: any = {}
     if (mediaTypes === MEDIA_TYPE.VIDEOS) {
+      const asset = resp.assets?.[0]
       res = {
-        tempFilePath: uri,
-        duration,
-        width,
-        height
+        ...asset,
+        tempFilePath: asset?.uri,
+        size: asset?.fileSize,
       }
     } else {
       res = {
-        tempFilePaths: [uri],
-        tempFiles: [resp]
+        tempFilePaths: resp.assets?.map((item) => item.uri),
+        tempFiles: resp.assets?.map((item) => ({
+          ...item,
+          path: item.uri,
+          size: item.fileSize,
+          type: item.mimeType,
+        }))
       }
     }
     if (res.tempFilePath || (!!res.tempFilePaths && res.tempFilePaths.length > 0)) {

package/src/lib/showActionSheet/index.tsx

@@ -20,9 +20,13 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
       sibling && sibling.destroy()
       sibling = undefined
       const res = { tapIndex, errMsg: 'showActionSheet:ok' }
-      success?.(res)
-      complete?.(res)
-      resolve(res)
+      // fix: iOS 无法打开相册
+      // https://github.com/expo/expo/issues/25705
+      setTimeout(() => {
+        success?.(res)
+        complete?.(res)
+        resolve(res)
+      }, 1)
     }
 
     function onFail () {
@@ -38,7 +42,7 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
       <ActionSheet
         autoDectect={autoDectect}
         type={type}
-        visible={false}
+        visible={true}
         onClose={onFail}
         menus={
           itemList.map((item, index) => {
@@ -46,7 +50,7 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
               type: 'default',
               label: item,
               textStyle: { color: itemColor },
-              onPress: onSuccess.bind(this, index)
+              onPress: () => onSuccess(index)
             }
           }) as any
         }
@@ -55,41 +59,11 @@ function showActionSheet (obj: Taro.showActionSheet.Option): Promise<Taro.showAc
             type: 'default',
             label: '取消',
             textStyle: { color: itemColor },
-            onPress: onFail.bind(this)
+            onPress: onFail
           }
         ] as any}
       />
     )
-
-    // hack 的做法。不推荐
-    setTimeout(() => {
-      sibling.update(
-        <ActionSheet
-          autoDectect={autoDectect}
-          type={type}
-          visible
-          onClose={onFail}
-          menus={
-            itemList.map((item, index) => {
-              return {
-                type: 'default',
-                label: item,
-                textStyle: { color: itemColor },
-                onPress: onSuccess.bind(this, index)
-              }
-            }) as any
-          }
-          actions={[
-            {
-              type: 'default',
-              label: '取消',
-              textStyle: { color: itemColor },
-              onPress: onFail.bind(this)
-            }
-          ] as any}
-        />
-      )
-    }, 100)
   })
 }