Se você ainda não tem uma conta do Firebase, pode criar uma na página inicial do Firebase. Depois que sua conta estiver configurada, acesse o console do Firebase e clique no botão Adicionar projeto botão para adicionar um novo projeto.
Insira os detalhes do seu projeto e clique no botão Criar Projeto botão quando terminar. Na próxima página, selecione a opção web (ou seja, o </> ícone). Isso vai levar você a Adicione o Firebase ao seu aplicativo da web página.
Forneça um apelido para seu aplicativo e clique em Registrar aplicativo. Na página seguinte, você receberá o comando de instalação do SDK do Firebase e os detalhes que precisa incluir no arquivo de configuração do seu aplicativo para conectá-lo ao Firebase.
Certifique-se de copiar toda essa configuração para um local acessível, pois você a usará mais tarde.
Desenvolvendo o aplicativo React Native
Pré-requisitos
Para seguir este tutorial, você precisará de:
- Pelo menos um entendimento básico de React Native
- Configure Expo ou React Native CLI em sua máquina de desenvolvimento local
- Se você estiver usando o React Native CLI, precisará ter o XCode ou o Android Studio instalado para executar o emulador.
- Instale o firebase com
npm install firebase.
Abra o arquivo e importe o seguinte:
1 |
import React, {useState} from 'react' |
2 |
import {View, StyleSheet, Image, Text, TouchableOpacity, SafeAreaView, Alert} from 'react-native' |
3 |
import * as ImagePicker from 'expo-image-picker' |
4 |
import {firebase} from '../config' |
A seguir, crie um UploadScreen função de componente e retornar um vazio
1 |
const UploadScreen = () => { |
2 |
return( |
3 |
<SafeAreaView> |
4 |
// view will go here
|
5 |
</SafeAreaView> |
6 |
)
|
7 |
}
|
8 |
export default UploadScreen; |
Logo acima do return declaração, crie o image e loading estado e configurá-los para null para false inicialmente:
1 |
const [image, setImage] = useState(null) |
2 |
const [uploading, setUploading] = useState(false) |
Crie a função pickImage. Quando invocada, esta função inicia a biblioteca de imagens do seu dispositivo para que você possa escolher sua imagem. Depois que a imagem é recuperada, nós a armazenamos no estado chamando setImage:
1 |
const pickImage = async () => { |
2 |
let result = await ImagePicker.launchImageLibraryAsync({ |
3 |
mediaTypes: ImagePicker.MediaTypeOptions.All, |
4 |
allowsEditing: true, |
5 |
aspect: [4,3], |
6 |
quality: 1 |
7 |
});
|
8 |
const source = {uri: result.assets[0].uri} |
9 |
console.log(source) |
10 |
setImage(source) |
11 |
};
|
Depois de escolher uma imagem, temos que enviá-la para o Firebase. A função a seguir cuida disso quando invocada:
1 |
const uploadImage = async () => { |
2 |
setUploading(true) |
3 |
const response = await fetch(image.uri) |
4 |
const blob = response.blob() |
5 |
const filename = image.uri.substring(image.uri.lastIndexOf('/')+1) |
6 |
var ref = firebase.storage().ref().child(filename).put(blob) |
7 |
try { |
8 |
await ref; |
9 |
} catch (e){ |
10 |
console.log(e) |
11 |
}
|
12 |
setUploading(false) |
13 |
Alert.alert( |
14 |
'Photo uploaded!' |
15 |
);
|
16 |
setImage(null); |
17 |
}
|
Com esse código, buscamos o endereço da imagem e recuperamos o nome do arquivo, que então carregamos no Firebase. Se for bem-sucedido, ativamos um alerta que diz “Foto carregada” e redefinimos o estado da imagem. No entanto, se um erro for encontrado, nós o registramos no console.
Em seguida, exibimos a exibição de nosso UploadScreen componente. Copie e cole o seguinte código dentro do return() declaração do UploadScreen função:
1 |
<SafeAreaView style={styles.container}> |
2 |
<TouchableOpacity style={styles.selectButton} onPress={pickImage}> |
3 |
<Text style={styles.btnText}>Pick an Image</Text> |
4 |
</TouchableOpacity> |
5 |
<View style={styles.imageContainer}> |
6 |
{image && <Image source={{uri: image.uri}} style={{width: 300, height: 300}}/>} |
7 |
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}> |
8 |
<Text style={styles.btnText}>Upload Image</Text> |
9 |
</TouchableOpacity> |
10 |
</View> |
11 |
</SafeAreaView> |
No código acima definimos dois botões:
- Um para escolher uma imagem (clicar neste botão invoca
pickImage) - O outro para fazer upload da imagem para o Firebase (pressionar isso invoca
uploadImage)
Salve as alterações do arquivo.
Finalmente, entre App.js e use o seguinte código:
1 |
import * as React from 'react'; |
2 |
import { View, StyleSheet } from 'react-native'; |
3 |
import UploadScreen from './components/UploadScreen'; |
4 |
|
5 |
export default function App() { |
6 |
return ( |
7 |
<View style={styles.container}> |
8 |
<UploadScreen /> |
9 |
</View> |
10 |
);
|
11 |
}
|
12 |
|
13 |
const styles = StyleSheet.create({ |
14 |
container: { |
15 |
flex: 1 |
16 |
}
|
Salve o arquivo e verifique seu dispositivo/emulador. Você deve encontrar a seguinte IU renderizada em seu dispositivo.
Clique no Escolha uma imagem botão, selecione uma imagem do seu dispositivo e clique Enviar Imagem para carregá-lo no Firebase.
Vá para o armazenamento do Firebase e confirme se a imagem foi carregada.
Como você pode ver acima, o meu foi carregado com sucesso.
Agora que você sabe como fazer upload de uma imagem, pode usar esse conhecimento para criar projetos ainda mais empolgantes com o React Native. Por exemplo, você pode listar seus produtos digitais ou várias opções de acesso premium (por exemplo, quantidade de moedas extras para um jogo) que pode ser desbloqueado por meio de compras no aplicativo.
Conclusão
Como desenvolvedor, o Firebase oferece muitos recursos, incluindo upload de arquivos com armazenamento. O upload de arquivos para o Firebase exige que você configure um aplicativo da Web no Firebase. Ao final desse processo, você obtém as configurações para conectar seu aplicativo React Native ao Firebase.
Espero que você tenha achado este artigo útil. Você também pode aprender como fazer upload de imagens para o Firebase a partir de um aplicativo Android.
