我正在使用原生基本按钮我想对齐屏幕中心的按钮我试过这个:
<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>
但它减少了输入字段的大小我得到的结果如下:
我没有使用您正在使用的表单/项目组件,但这是我在找到自己的类似登录表单时学到的内容:
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%',justifyContent: 'center',alignItems: 'center' } inputText: { marginLeft: '20%',width: '60%' } loginButton: { backgroundColor: 'blue',color: 'white' } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。