React-Native按钮对齐中心

owfi6suc 于 2023-06-30 发布在 React

关注(0)|答案(3)|浏览(127)

我使用的是原生的基础按钮我想对齐的按钮在屏幕的中心我尝试了这个：

<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>

但它减少了输入字段的大小，我得到的结果如下：

react-native

来源：https://stackoverflow.com/questions/42471762/react-native-button-align-center

3条答案

按热度按时间

dldeef671#

我没有使用过您正在使用的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'
   }
}

赞(0）回复(0）举报 2023-06-30

stszievb2#

您可以添加以下样式：

position: 'relative',
height: 500,
alignItems: 'center',
justifyContent: 'center',

赞(0）回复(0）举报 2023-06-30

yhived7q3#

<button 
  style={{width:'270px', backgroundColor:'#99004d', marginTop:20, 
  marginLeft:'750px'}} 
  className="btn btn-outline-secondary btn-lg btn-block">
  Home Page
 </button>

赞(0）回复(0）举报 2023-06-30

我来回答

React-Native按钮对齐中心

3条答案

相关问题

热门标签

最新问答