Question

我在LoginForm中有一个View组件

export default class App extends Component<Props> {
  render() {
    return (
      <View>
          <Header headerText='Test' />
          <LoginForm style={{flex: 1, justifyContent: 'center'}}/>
      </View>
    );
  }
}

，我想将LoginForm居中，但是flex: 1, justifyContent: 'center'似乎没有用。

我在这里想念什么？请注意，LoginForm正在渲染其他组件。我应该样式化那些组件吗？

Answer 1

您需要一个视图来将所有内容居中，并需要一个子窗口来定义表单的大小，如下所示：

<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
    <View style={{width: 200, height: 100}}> 
        <LoginForm />
    </View>
</View>

示例：

https://snack.expo.io/Hyea9ZvYQ

Answer 2

可能您需要将flex：1添加到父视图：

<View style={{flex: 1}}>
  <Header headerText='Test' />
  <LoginForm style={{flex: 1, justifyContent: 'center'}}/>
</View>

编辑：

通过在LoginForm的父组件中放置样式，我的意思与此类似：

import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';

class LoginForm extends Component {

  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <TextInput placeholder={'Username'}/>
          <TextInput placeholder={'Password'}/>
          <Button title={'Login'} />
        </View>
    )
  }
}

class App extends Component {
  render() {
    return (
        <View style={{ flex: 1, paddingTop: 13, }}>
          <Text>Some dummy component</Text>
          <LoginForm/>
        </View>
    );
  }
}

export default App;

如果您希望将样式从App组件传递到LoginForm，则可以使用类似于以下的内容：

import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';

class LoginForm extends Component {

  render() {
    return (
        <View {...this.props}>
          <TextInput placeholder={'Username'}/>
          <TextInput placeholder={'Password'}/>
          <Button title={'Login'} />
        </View>
    )
  }
}

class App extends Component {
  render() {
    return (
        <View style={{ flex: 1, paddingTop: 13, }}>
          <Text>Some dummy component</Text>
          <LoginForm style={{ flex: 1, justifyContent: 'center' }}/>
        </View>
    );
  }
}

export default App;

Answer 3

您需要在容器中设置样式

style={{ justifyContent: 'center', alignItems: 'center' }}

Answer 4

我认为您应该在LoginFrom的样式中添加alignSelf:'center'

如何在视图中居中放置组件

4 个答案: