ネイティブのFirebaseストレージ

どのような反応ネイティブベースのストレージ
クラウドストレージは、迅速かつ容易に保存し、ユーザーが生成するコンテンツを配布し、写真やビデオなどのように設計されています.Firebaseストレージは本当に私のような開発者の生活の中で革命的なツールです.APIは本当に簡単で、設定を簡単です.さあ、問題の核心に戻りましょう
イメージとビデオを保存する方法
FireBaseストレージに画像や写真を保存します.何も簡単です.ユーザーが彼のプロフィール画像を置くことができなければならないので、それはohhに保存されなければならないでしょう🤦‍♂️ データベース.ねえ心配😂 あなたはそれをすべて把握します.レッツ・ゴー・トリック.まず、写真を選択できるようにする必要があります、私は反応ネイティブ画像作物ピッカーを使用します.パッケージはNPM == available hereで利用可能です
インストール後にコードをキスしましょう😰.
イメージを保存するには、画像の参照を作成する必要があります.参照は、あなたのバケツのファイルへのローカルポインターです.これは既に存在しているファイル、またはまだ存在しないファイルのいずれかです.参照を作成するには、refmのthodeを使用してください:それは単にあなたのイメージのURLです簡単です.
参照の作成

import React from 'react'
import storage from '@react-native-firebase/storage';

export default function UploadImage() {
const reference = storage().ref('url or name_of_file');
}

**
今すぐImageCropPicker機能を使用して写真を選択してみましょう.
そうする方法があります

import React from 'react'
import storage from '@react-native-firebase/storage';
import ImagePicker from 'react-native-image-crop-picker';
export default function UploadImage() {
    //function for choose the image with image-crop-picker
    const choose_photo = () => {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
            setImage(image.path)
            sheet.current.close()

        });
    }

    //Ref of our image
   const reference = storage().ref('url or name_of_file');

}

今我々は選択したイメージを取るし、我々のアプリケーションに表示するためにUSENTとフックを作成する必要があります.

const [image, setImage] = React.useState(null);

`
画像を選択して表示するボタンを作りましょう
`

  return (
        <view style={styles.container}>
            <View style={styles.container_images}>
                <TouchableOpacity onPress={() => choose_photo()}> 
                    {image && <Image source={{ uri: image }} 
             style={styles.image_picker} />}
                    {!image && <Image source={require('../assets/moi.jpg')} 
                  style={styles.image_picker} />}
                </TouchableOpacity>
            </View>
        </view>
    )

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },

    image_picker: {
        width: 180,
        height: 180,
        borderRadius: 90
    },
    container_images: {
        alignItems: 'center',
        marginTop: hp('1%')
    }
})

`
フルコードはこちら
`

import React from 'react'
import storage from '@react-native-firebase/storage';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';
export default function UploadImage() {
    //function for choose the image with image-crop-picker
    const choose_photo = () => {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
            setImage(image.path)
            sheet.current.close()

        });
    }

    //Ref of our image
   const reference = storage().ref('url or name_of_file');
    //React Hook useState
    const [image, setImage] = React.useState(null);

    return (
        <view style={styles.container}>
            <View style={styles.container_images}>
                <TouchableOpacity onPress={() => choose_photo()}> 
                    {image && <Image source={{ uri: image }}
                     tyle={styles.image_picker} />}

                    {!image && <Image source={require('../assets/moi.jpg')}
                     style={styles.image_picker} />}
                </TouchableOpacity>
            </View>
        </view>
    )

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },

    image_picker: {
        width: 180,
        height: 180,
        borderRadius: 90
    },
    container_images: {
        alignItems: 'center',
        marginTop: hp('1%')
    }
})

`
さあ、Firebaseストレージにイメージを保存しましょう
このために、我々は我々の参照とリンクするもう一つの機能を作ります、これはイメージのURLです.
関数内の定数参照を移動します
サベリング写真
`

        const savephoto = async () => {
        const aploaduri = image;
        let filename = 
        aploaduri.substring(aploaduri.lastIndexOf('/') + 1);
        const reference = storage().ref(filename)
        const task = reference.putFile(aploaduri)
        //set  transferred state
        task.on('state_changed', taskSnapshot => {
            console.log(`${taskSnapshot.bytesTransferred} 
         transferred out of 
              ${taskSnapshot.totalBytes}`);
        });

        try {
            await task;
            const url = await reference.getDownloadURL()
            Alert.alert('Your image is saved! smile😇')
            return url
        }
        catch (e) {
            console.log(e)
            return null
        }

    }

`
今すぐOnpressボタンとブームとSaveRange写真機能を呼び出します
こちらが最終コードです
`

import React from 'react'
import storage from '@react-native-firebase/storage';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';
export default function UploadImage() {
    //function for choose the image with image-crop-picker
    const choose_photo = () => {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
            setImage(image.path)
            sheet.current.close()

        });
    }
    //React Hook useState
    const [image, setImage] = React.useState(null);

    const savephoto = async () => {
        const aploaduri = image;
        let filename = aploaduri.substring(aploaduri.lastIndexOf('/') + 1);
        const reference = storage().ref(filename)
        const task = reference.putFile(aploaduri)
        //set  transferred state
        task.on('state_changed', taskSnapshot => {
            console.log(`${taskSnapshot.bytesTransferred} transferred out of 
              ${taskSnapshot.totalBytes}`);
        });

        try {
            await task;
            const url = await reference.getDownloadURL()
            Alert.alert('Your image is saved! smile😇')
            return url
        }
        catch (e) {
            console.log(e)
            return null
        }

    }

    return (
        <view style={styles.container}>
            <View style={styles.container_images}>
                <TouchableOpacity onPress={() => choose_photo()}>
                    {image && <Image source={{ uri: image }} 
             style={styles.image_picker} />}
                    {!image && <Image source={require('../assets/moi.jpg')}
             style={styles.image_picker} />}
                </TouchableOpacity>
            </View>

            <View>
                <TouchableOpacity onPress={() => savephoto()}>
                    <Text>save</Text>
                </TouchableOpacity>
            </View>
        </view>
    )

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },

    image_picker: {
        width: 180,
        height: 180,
        borderRadius: 90
    },
    container_images: {
        alignItems: 'center',
        marginTop: hp('1%')
    }
})

`
私の記事を読んでいただきありがとうございます.