Question

让我作为序言，这是我第一次使用React Native，所以我完全不知道自己在做什么。如果这是一个愚蠢的问题，请不要把我撕裂。

这是我现在所拥有的图片...

但是我要的是在屏幕中间放置这些输入框和按钮。

所有这些事情都是在我将一个容器放入视图中时发生的。我不完全确定如何同时使用列弹性控件和行弹性控件，因此我可以将输入框垂直对齐，将按钮水平对齐，所以我只是在玩弄它，这就是我所得到的。我的代码将在下面。

import React, { Component } from 'react';
import {Keyboard, Text, View, TextInput, TouchableWithoutFeedback, Alert, KeyboardAvoidingView, StyleSheet} from 'react-native';
import { Container, Content, Header, Body, Icon } from 'native-base';

import { Button, 
        Input } 
        from 'react-native-elements';

class Login extends Component {
    render() {
        return (
            <View style={styles.Form}>

                <Input
                keyboardType='email-address'
                placeholder='Email'
                style={{justifyContent: 'center',}}
                leftIcon={
                    <Icon
                    name='ios-person'
                    size={24}
                    color='black'
                    />
                }
                />

                <Input
                placeholder='Password'
                secureTextEntry='true'
                style={{justifyContent: 'center',}}
                leftIcon={
                    <Icon
                    name='ios-lock'
                    size={24}
                    color='black'
                    />
                }
                />
                <Container style={styles.ButtonContainer}>
                    <Button
                        style={styles.Button}
                        iconLeft
                        title='Login'
                    />

                    <Button
                        style={styles.Button}
                        iconLeft
                        title='Signup'
                    />
                </Container>
            </View>

        );
    }
}

export default Login;

const styles = StyleSheet.create({
    Form: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
        paddingRight: 50,
        paddingLeft: 50,
    },

    ButtonContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
    },

    Button: {
        flex: 1,
        paddingVertical: 10,
        textAlign:'center',
        padding: 5,
    }
})

Answer 1

重要！请勿复制和粘贴此代码。我更改了一些组件，以便在浏览器上运行此代码。将它们更改为您自己的组件！

我故意留下红色边框，因此您可以看到组件的位置。这种布局将为您提供很大的灵活性。试一下值，然后删除那些红线。

class Login extends Component {
  render() {
    return (
      <View style={styles.Form}>
        <View style={styles.Top}>
          <TextInput
            keyboardType="email-address"
            placeholder="Email"
            style={styles.Input}
          />
        </View>

        <View style={styles.Bottom}>
          <TextInput
            placeholder="Password"
            secureTextEntry="true"
            style={styles.Input}
          />
          <View style={styles.ButtonContainer}>
            <Button style={styles.Button} iconLeft title="Login" />

            <Button style={styles.Button} iconLeft title="Signup" />
          </View>
        </View>
      </View>
    );
  }
}

export default Login;

const styles = StyleSheet.create({
  Bottom: {
    flex: 1,
    justifyContent: 'flex-start',
    width: '100%',
    borderWidth: 1,
    borderColor: 'red',
  },
  Top: {
    flex: 1,
    justifyContent: 'flex-end',
    width: '100%',
    borderWidth: 1,
    borderColor: 'red',
  },
  Input: {
    justifyContent: 'center',
    width: '80%',
    alignSelf: 'center',
    margin: 20,
    borderWidth: 1,
    borderColor: 'red',
  },
  Form: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
    paddingRight: 50,
    paddingLeft: 50,
  },

  ButtonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
  },

  Button: {
    paddingVertical: 10,
    textAlign: 'center',
    padding: 5,
  },
});

我的输入框未在React-Native中居中

1 个答案: