J'utilise le bouton de base natif, je veux aligner le bouton au centre de l'écran, j'ai essayé ceci:
<Container style={{flex:1,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',}}>
<Form style={{}}>
<Item last>
<Input placeholder='Username'
style={{color:'white'}}/>
</Item>
<Item last>
<Input placeholder="Password"
style={{color:'white'}} />
</Item>
<Button style={{width:170,backgroundColor:'#99004d',marginTop:20,}}>
<Text style={{marginLeft:50}}>Login</Text>
</Button>
<Text style={{color:'white'}}>{this.props.Name}</Text>
</Form>
</Container>
Mais en réduisant la taille du champ de saisie, le résultat que j'obtiens est le suivant:
Je n'ai pas utilisé les composants Form/Item que vous utilisez, mais voici ce que j'ai appris lorsque j'ai trouvé mon propre formulaire de connexion similaire:
Les styles justificationContent et alignItems définissent le comportement des enfants, essayez donc de placer les entrées de texte dans un parent différent du bouton:
<View style={styles.loginTextSection}>
<TextInput placeholder='UserName' style={styles.inputText} />
<TextInput placeholder='Password' style={styles.inputText} secureTextEntry={true}/>
</View>
<View style={styles.loginButtonSection}>
<Button onPress={() => doLoginStuff()}
style={styles.loginButton}
title="Login"
/>
</View>
const styles = StyleSheet.create({
loginTextSection: {
width: '100%',
height: '30%',
}
loginButtonSection: {
width: '100%',
height: '30%',
justifyContent: 'center',
alignItems: 'center'
}
inputText: {
marginLeft: '20%',
width: '60%'
}
loginButton: {
backgroundColor: 'blue',
color: 'white'
}
}