gregory Posted November 11, 2021 at 12:19 PM Report Share #624552 Posted November 11, 2021 at 12:19 PM estou a seguir o seguinte tutorial: https://www.youtube.com/watch?v=pdFqfOTmd60 na tela do vídeo ele tem tudo alinhado e usando o flex:1 se eu uso flex 1 tudo que esta na tela, fica fora das bordas segue logo abaixo o meu código: import React, { useState, useEffect } from 'react'; import { View, Text, Image, TextInput, TouchableOpacity, StyleSheet, KeyboardAvoidingView, Animated } from 'react-native'; import { StatusBar } from 'react-native'; export default function App() { const [offset] = useState(new Animated.ValueXY({ x: 0, y: 80 })) useEffect(() => { Animated.spring(offset.y, { toValue: 0, speed: 4, bounciness: 30, useNativeDriver: true, }).start(); }, []); return ( <KeyboardAvoidingView style={styles.background}> <StatusBar hidden={true} translucent={false} networkActivityIndicatorVisible={true} /> <View style={styles.containerLogo}> <Image source={require('./images/logo1.png')} /> </View> <Animated.View style={[styles.container, { transform: [{ translateY: offset.y }] }]}> <TextInput style={styles.imput} placeholder="Email" autoCorrect={false} onChangeText={() => { }} /> <TextInput style={styles.imput} placeholder="Senha" autoCorrect={false} onChangeText={() => { }} /> <TouchableOpacity style={styles.btnSubmit}> <Text style={styles.submitText} >Entrar</Text> </TouchableOpacity> <TouchableOpacity style={styles.btnRegister}> <Text style={styles.RegisterText} >Criar Conta</Text> </TouchableOpacity> </Animated.View> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ background: { backgroundColor: 'black', alignItems: 'center', justifyContent: 'center', backgroundColor: '#191919' }, containerLogo: { justifyContent: 'center', alignItems: 'center', }, container: { paddingBottom: 50, alignItems: 'center', justifyContent: 'center', width: '90%', }, imput: { backgroundColor: '#FFF', width: '90%', marginBottom: 15, color: '#222', fontSize: 17, borderRadius: 7, padding: 10 }, btnSubmit: { color: 'blue', width: '90%', height: 45, alignItems: 'center', justifyContent: 'center', borderRadius: 7, }, submitText: { color: '#FFF', fontSize: 18 }, btnRegister: { marginTop: 10, }, RegisterText: { color: 'white' } }); esqueci de avisar que se eu tirar o flex 1,consigo ver somente metade da tela Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now