【16】React Nativeでテキストエディタを作ってみる！【画像インポート・デザイン微調節編】

![image name](URL)

// react-native-markdown-display
// renderRules.js
  image: (
    node,
    children,
    parent,
    styles,
    allowedImageHandlers,
    defaultImageHandler,
  ) => {
    const {src, alt} = node.attributes;

    // we check that the source starts with at least one of the elements in allowedImageHandlers
    const show =
      allowedImageHandlers.filter((value) => {
        return src.toLowerCase().startsWith(value.toLowerCase());
      }).length > 0;

    if (show === false && defaultImageHandler === null) {
      return null;
    }

    const imageProps = {
      indicator: true,
      key: node.key,
      style: styles._VIEW_SAFE_image,
      source: {
        uri: show === true ? src : `${defaultImageHandler}${src}`,
      },
    };

    if (alt) {
      imageProps.accessible = true;
      imageProps.accessibilityLabel = alt;
    }

    return <FitImage {...imageProps} />;
  },

  const imageProps = {
    indicator: true,
    key: node.key,
    style: styles._VIEW_SAFE_image,
    source: {
      uri: show === true ? src : `file:///${src}`,
    },
  };

const show =
  allowedImageHandlers.filter((value) => {
    console.log(value);
    return src.toLowerCase().startsWith(value.toLowerCase());
  }).length > 0;

// react-native-markdown-display
// index.js
defaultImageHandler = 'https://',

export async function readImages(){
    const imageList = await FileSystem.readDirectoryAsync(imagePickerUri)
    let imageDataList=[];

    for (const i in imageList) {
        const data = await FileSystem.getInfoAsync(imagePickerUri + imageList[i])
        imageDataList.push(data);
    }

    if (imageDataList.length > 0){
         const sort_imageDataList = imageDataList.sort((a, b) => {
            if (a.modificationTime > b.modificationTime)
                return -1;
            if (a.modificationTime < b.modificationTime)
                return 1;
            return 0;
        });

        return sort_imageDataList
    }
}

async function onPressPhoto() {
    props.onPress()
    Image_List.unshift(undefined)
    const image = await importImage()
    console.log(image);
    for (let i in Image_List) {
        if (!Image_List[i]) { 
            !!image ? Image_List.splice(i, 1, image) : Image_List.splice(i, 1)
        }
    }
    props.onPressOut()
}

export async function importImage() {
    const data = await ImagePicker.launchImageLibraryAsync({ quality: 1 }) // ここ
    console.log(data.cancelled);
    if (!data.cancelled && data.type == 'image') {
        const dataUri = data.uri
        const fileName = dataUri.match(".+/(.+?)([\?#;].*)?$")[1]
        const fileUri = imagePickerUri + fileName

        await FileSystem.makeDirectoryAsync(imagePickerUri, { intermediates: true })
        await FS.copyAsync({ from: dataUri, to: fileUri })
        const imageData= await FileSystem.getInfoAsync(fileUri)

        const text = `![image](${fileName})`
        Clipboard.setString(text)

        return imageData
    } 
}

const data = await ImagePicker.launchImageLibraryAsync({ quality: 1 }) // ここ

// build/ImagePicker.js 69行目付近
export async function launchImageLibraryAsync(options) {
    if (!ExponentImagePicker.launchImageLibraryAsync) {
        throw new UnavailabilityError('ImagePicker', 'launchImageLibraryAsync');
    }
    // ここ
    return await ExponentImagePicker.launchImageLibraryAsync(options ?? {});
}

// ExponentImagePicker.d.ts
declare const _default: import("@unimodules/core").ProxyNativeModule;
export default _default;

// build/ImagePicker.js 69行目付近
export async function launchImageLibraryAsync(options) {
    if (!ExponentImagePicker.launchImageLibraryAsync) {
        throw new UnavailabilityError('ImagePicker', 'launchImageLibraryAsync');
    }

    const data = await ExponentImagePicker.launchImageLibraryAsync(options ?? {})
    console.log('==========');
    console.log(data);
    return data
}

// node_modules/react-native-elements/dist/tooltip/Tooltip.js 201行目付近
<ModalComponent animationType="fade" visible={isVisible} transparent onShow={onOpen} 
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']} // 追加
>
          {this.renderModalContent()}
</ModalComponent>