Question

我需要将所有这些项目放在屏幕中央，但是，当使用justifyContent: "center"时，什么也没发生。

我删除了一些我认为不必要的代码。如果是这样，请说我将其完整发布：

Problem

环境

本机：0.60
设备：三星S8 +

代码

      <View>
        <Header style={{ backgroundColor: '#006bb3' }}>
          <Left>
            <Icon
              name="arrow-left" type='MaterialCommunityIcons'
              style={{ color: "#FFF" }}
              onPress={() => this.props.navigation.navigate('HomeLogin')} />
          </Left>
          <Body>
            <Title style={{color:'#FFF'}}>Entrar</Title>
          </Body>
          <Right />
        </Header>
      </View>
      <View style={styles.container }>
        <Image source={require('../assets/logo.png')} style={{width: 284, height: 76, marginBottom: 78}} />
        <TextInput 
          placeholder="E-Mail"
          style={styles.input}
        />
       <TouchableOpacity style={styles.btn} activeOpacity={0.8}>
          <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} style={styles.btn} colors={['#1aa3ff', '#006bb3']}>
            <Text style={styles.textbtn}>
              Entrar
            </Text>
          </LinearGradient>
        </TouchableOpacity>
      </View>
      </View>

样式：

import { StyleSheet, Dimensions } from 'react-native';
  container: {
    alignItems:'center',
    justifyContent:"center"  
  },

我希望内容在设备屏幕上垂直居中。

Answer 1

使用此：

 container: {
    flex:1
    alignItems:'center',
    justifyContent:'center'  
  },

Answer 2

我设法解决了这个问题！我定义了一个具有100％可用高度的视图，并使用对齐内容居中

在视图中垂直居中放置项目

2 个答案: