javascript - 在 View 中垂直居中元素

标签 javascript css react-native

我需要将所有这些元素置于屏幕中央,但是,当使用 justifyContent: "center" 时,什么也没有发生。

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

Problem

环境

  • native react :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"  
  },

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

最佳答案

使用这个:

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

关于javascript - 在 View 中垂直居中元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57446600/

相关文章:

javascript - 渲染方法在内部映射值时中断

javascript - 问答游戏,比较单选按钮的值来回答

jquery - 使用 jQuery 定位元素在 Internet Explorer 8 中不起作用

html - 有谁知道为什么在元素中添加文本会改变父元素的宽度?

ios - Expo/React-Native,有没有办法在设备/模拟器上测试运行独立的 iOS 应用程序?

javascript - ReactJS:类型错误:渲染不是函数 updateContextConsumer

javascript - Node - 切换到 ES6 模块时的 Protractor "SyntaxError: Cannot use import statement outside a module"

javascript - 在 Bootstrap 模式弹出窗口之前验证表单

html - 将按钮放在图像和下方文本的中间

react-native - React Native SVG 使用不受支持的 JSX 命名空间标签。如何将 throwIfNamespace 设置为 false?