我正在使用 native 基本按钮,我想将按钮对齐在屏幕中心,我尝试了以下操作:
<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>
但是它减少了输入字段的大小,我得到的结果如下:
最佳答案
我没有使用过您正在使用的 Form/Item 组件,但以下是我在弄清楚自己的类似登录表单时学到的东西:
justifyContent 和alignItems 样式定义子项的行为方式,因此请尝试将文本输入放入与按钮不同的父项中:
<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'
}
}
关于reactjs - React-Native 按钮居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42471762/