在视图中垂直居中项目答案

【问题标题】：Vertically center items in a view在视图中垂直居中项目
【发布时间】：2019-08-11 00:45:26
【问题描述】：

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

我删除了一些我认为不必要的代码。如果是这样，就说我会完整地发布它：

环境

反应原生：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"  
  },

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

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

使用这个：

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

【讨论】：

当我使用 justify 时，我的图像就消失了。感谢您的帮助

【解决方案2】：

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

【讨论】：