web-dev-qa-db-ja.com

React-Native Button Align Center

私はこれを試した画面の中央にボタンを配置したいネイティブベースボタンを使用しています：

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

しかし、入力フィールドのサイズを小さくすると、次の結果が得られます：

enter image description here

reactjsreact-nativenative-base
9
Ahsan Azwar

使用しているフォーム/アイテムコンポーネントは使用していませんが、同様のログインフォームを見つけたときに学んだことは次のとおりです。

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