Olá! amigos!!!
Estou trabalhando em um projeto, onde estou criando uma tela de login, sou iniciante em react e estou tendo problemas para posicionar os elementos que aparecem na tela da maneira como desejo, eles estão ficando apenas alinhado no centro da tela e os comandos que estou usando para reposicionar não estão respondendo.
Será que podem me ajudar, Segue o meu codigo :
import React, { Component } from 'react';
import { Alert, Button, TextInput, View, StyleSheet, Text,Image } from 'react-native';
import { TouchableHighlight } from 'react-native'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
return (
<View style={styles.container}>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'name@example.com'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'***********'}
secureTextEntry={true}
style={styles.input}
/>
<TouchableHighlight onPress={clickHandler} style={styles.botton}>
<Text>
Login
</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.resetpass}>
<Text>
Esqueceu a Senha?
</Text>
</TouchableHighlight>
<Image source={{uri:''}} style={{ width: 200, height: 150, bottom: 350, alignItems:'center'}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#87CEEB',
resetpass:{
position: 'absolute',
width: 300,
height: 40,
alignItems: 'center',
justifyContent: 'center',
right: 60,
bottom: 180,
}
},
input: {
width: 300,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
backgroundColor: '#F8F8FF',
borderRadius: 20,
marginBottom: 20,
},
botton: {
position: 'absolute',
width: 300,
height: 40,
alignItems: 'center',
justifyContent: 'center',
right: 40,
bottom: 40,
backgroundColor:'#FF6347',
borderRadius:50,
}
});
const clickHandler = () =>{
alert('Login efetuado');
};
