
Nesta aula vamos configurar a splash screen do nosso app.
Antes vamos implementar uma ultima feature que é atualizar o preço do bitcoin do nosso componente CurrencPrice.
1 – Vamos criar um state para atualizar nosso price atual:
1 |
const [price, setPrice] = useState() |
2 – Vamos criar uma função que vai trazer nosso preço atual, vamos utilizar .pop() que paga o último item do nosso array e aproveitar state coinsGraphicList
1 2 3 |
function priceCotation(){ setPrice(coinsGraphicList.pop()) } |
3 – Em nosso useEfect vamos chamar nossa função, para garantir que sempre que o preço for atualizado nosso price também será atualizado
1 2 3 4 5 6 7 8 9 10 11 12 |
useEffect(() =>{ getListCoins(url(days)).then((data)=>{ setCoinsList(data) }); getPriceCoinsGraphic(url(days)).then((dataG) =>{ setCoinsGraphicList(dataG) }); priceCotation()//atualizando o preço if(updateData){ setUpdateData(false) } },[updateData]) |
4 – Agora passamos como props do nosso component CurrentPrice em App.js
1 |
<CurrentPrice lastCotation={price}/> |
5 – Dentro do Nosso componente CurrentPrice vamos chamar a nossa props no lugar do price que hoje esta fixo para termos o valor sendo atualizado dinamicamente
1 2 3 4 5 6 7 8 |
export default function CurrentPrice(props){ return( <View style={styles.headerPrice}> <Text style={styles.currentPrice}>$ {props.lastCotation}</Text> <Text style={styles.textPrice}>ultima cotação</Text> </View> ) } |
Configurando SplashScreen
As imagens inciais de um app, que foram geradas no projeto pelo expo, ficam dentro de assets e são justamente elas que iremos substituir por nossas imagens personalizadas.
Nós seguimos a documentação do expo para gerar nossas imagens personalizadas.
Você também podem gerar imagens personalizadas, veja mais detalhes sobre tamanhos e medias e como gerar na documentação:
Com as imagens geradas podemos então substituir as imagens, assim quando o expo for gerar nosso apk, ele ira configurar pra gente todo processo necessário.
Com tudo configurado vamos para o próximo passo.
Gerando o Apk
1 – Crie uma conta no Expo
Depois de criar a conta faca o login pelo terminal
1 |
expo login |
2 – Digite seu username ou email e password
Agora você, esta conectando tanto na web, como no seu terminal local, onde você poderá acompanhar detalhes da geração do seu app tanto localmente quanto na web.
3 – Configurando o app.json
1 2 3 4 5 6 7 8 |
"android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "package":"com.onebitcode.onebitcode", "versionCode": 1//adicionar ese trecho }, |
4 – Altere as cores para #000000, deixando nosso app.json assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "expo": { "name": "OneBitCoin", "slug": "OneBitCoin", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#000000" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#000000" }, "package": "com.onebitcode.onebitcoin", "versionCode": 1 } } } |
IMPORTANTE
1 – Antes de gerar o apk de fato é importante se atentar a um detalhe, se você não rodou o comando abaixo ainda (desde a instalação do expo) deve fazê-lo. Como a própria documentação diz, isso irá garantir que você não tenha nenhum erro na hora de gerar seu apk.
1 |
sudo npm install -g expo-cli |
2 – Após tudo verificado, podemos então gerar nosso Apk de fato:
1 |
expo build:android -t apk |
3 – Se você for subir para a play store você pode gerar rodando este comando, conforme a orientação da própria documentação:
1 |
expo build:android -t app-bundle |
4 – Precisamos falar para o expo se nós queremos utilizar uma KeyStore já existente ou ele pode criar uma para nosso aplicativo, como estamos rodando pela primeira vez neste projeto vamos selecionar a opção 1 para que o expo gere a KeyStore deste projeto.
Agora e só esperar ele fazer toda a configuração.
Por fim seu apk estará disponível na última url gerada no seu terminal ou pela web logado no expo você terá acesso total ao seu app.
Agora é só baixar o app, instalar e mostrar para os amigos e colocar no seu portfólio.
Agora você está pronto para desenvolver do zero seu app até o processo de instalação em um device de fato!
Curtiu? Deixe nos comentários suas dúvidas, melhorias e sugestões de novos conteúdos!
Mc miltinho – Joga o dedo pro ar