Question

我正在尝试创建一个高度为200且具有某些背景色的视图。在视图顶部，我想在工具栏正下方的屏幕中央放置两个文本。我的代码未将文本居中。文本出现在左侧，但我希望它们居中。我正在使用Base.js样式脚本作为标准化我的应用程序以重用样式的方式

查看附件图片

请参见下面的代码

//Base.js
import {StyleSheet, Dimensions} from 'react-native'

export const dimensions = {
  fullHeight: Dimensions.get('window').height,
  fullWidth: Dimensions.get('window').width
}

export const colors  = {
  primary: '#039BE5',
  secondary: '#027CB7',
  tertiary: '#FF4081'
}

export const padding = {
  sm: 10,
  md: 20,
  lg: 30,
  xl: 40
}

export const margin = {
    margin_1dp: 1,
    margin_4dp: 4,
  }

export const fonts = {
  font_18sp: 18,
  font_44sp: 44,
  lg: 28,
  //primary: 'Cochin'
}

export const pos = {
  position: 'absolute',
  top: 0, 
  alignItems: 'center',
  justifyContent:'center',
}

// added below our colors, fonts, padding etc
// base styles
const baseStyles = {
    container: {
      flex: 1,
      flexDirection: 'column',
      alignItems: 'stretch',
    },
    header: {
      backgroundColor: 'transparent',
      position: pos.position,
      top: 0,
      fontSize: fonts.font_44sp,
      fontFamily: fonts.primary,
      fontWeight: 'bold',
      color: 'black',
      textAlign: 'center',
    },
    sub_header: {
      backgroundColor: 'transparent',
      position: pos.position,
      top: 55,
      fontSize: fonts.font_18sp,
      fontFamily: fonts.primary,
      fontWeight: 'bold',
      color: 'white',
      textAlign: 'center',
    },
    image: {


      height: 200, justifyContent:'center', backgroundColor: '#00BCD4'

    },
    section: {
      paddingVertical: padding.lg,
      paddingHorizontal: padding.xl
    },
  }

  export default function createStyles(overrides = {}) {
    return StyleSheet.create({...baseStyles, ...overrides})
  }

//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components
import createStyles from '../styles/Base.js'
const styles = createStyles()

//import styles from './Style.js'

export default class Screen1 extends Component {
  //Screen1 Component
  render() {
    return (
      <View style={styles.container}>
           <View style={{  height: 200, justifyContent:'center', backgroundColor: '#00BCD4' }}  />

          <Text style={styles.header}> $0.00 </Text>
          <Text style={styles.sub_header}> Current Balance </Text>
        </View>


    );
  }

文本应在屏幕中间居中，在工具栏下方。谁能帮助修复我的代码，以使文本居中？预先感谢

Answer 1

因此，这可能无法解决所有问题，但是人们在使用flexbox时常犯的一个错误是，他们在指定flex-direction时没有意识到，您用来居中的样式被颠倒了。

通常，如果将flex-direction设置为默认值row，则可以使用align-items垂直居中。

但是，由于将其设置为column，因此您需要使用justify-content。

这是一篇有关flex的不错的文章。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

react-native的默认flexDirection是列 ...，因此您无需指定它...而alignItems将使孩子水平居中< / strong>带有列弯曲方向

<View style={{ alignItems: 'center', backgroundColor: '#00BCD4', height: 200 }} > <Text style={styles.header}> $0.00 </Text> <Text style={styles.sub_header}> Current Balance </Text> </View>

在屏幕上方的视图中居中显示文本（本机）

2 个答案: