reactjs – React-Native按钮对齐中心

发布时间：2020-12-15 05:05:56 所属栏目：百科来源：网络整理

导读：我正在使用原生基本按钮我想对齐屏幕中心的按钮我试过这个： Container style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center',}} Form style={{}} Item last Input placeholder='Username' style={{color:'white'}}/ /Item Item

我正在使用原生基本按钮我想对齐屏幕中心的按钮我试过这个：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!