如何在React Native中将文本设置为居中

Question

你好，我想把文本设置在中心位置，我尝试使用justifyContent和alignItems来实现居中对齐，但是没有成功，文本仍然显示在顶部。

LoginScreenStyles.js

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container: {
    paddingBottom: Metrics.baseMargin
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

ApplicationStyles.js

const ApplicationStyles = {
  screen: {
    mainContainer: {
      flex: 1,
      backgroundColor: Colors.transparent
    },
    backgroundImage: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0
    },
    container: {
      flex: 1,
      paddingTop: Metrics.baseMargin,
      backgroundColor: Colors.transparent
    },
    section: {
      margin: Metrics.section,
      padding: Metrics.baseMargin
    },
    sectionText: {
      ...Fonts.style.normal,
      paddingVertical: Metrics.doubleBaseMargin,
      color: Colors.snow,
      marginVertical: Metrics.smallMargin,
      textAlign: "center"
    },
    subtitle: {
      color: Colors.snow,
      padding: Metrics.smallMargin,
      marginBottom: Metrics.smallMargin,
      marginHorizontal: Metrics.smallMargin
    },
    titleText: {
      ...Fonts.style.h2,
      fontSize: 14,
      color: Colors.text
    }
  },
  darkLabelContainer: {
    padding: Metrics.smallMargin,
    paddingBottom: Metrics.doubleBaseMargin,
    borderBottomColor: Colors.border,
    borderBottomWidth: 1,
    marginBottom: Metrics.baseMargin
  },
  darkLabel: {
    fontFamily: Fonts.type.bold,
    color: Colors.snow
  },
  groupContainer: {
    margin: Metrics.smallMargin,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  sectionTitle: {
    ...Fonts.style.h4,
    color: Colors.coal,
    backgroundColor: Colors.ricePaper,
    padding: Metrics.smallMargin,
    marginTop: Metrics.smallMargin,
    marginHorizontal: Metrics.baseMargin,
    borderWidth: 1,
    borderColor: Colors.ember,
    alignItems: "center",
    textAlign: "center"
  }
};

export default ApplicationStyles;

LoginScreen.js

import React, { Component } from "react";
import { View, Text } from "react-native";

// Styles
import styles from "./Styles/LoginScreenStyles";

export default class LoginScreen extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <Text style={styles.centered}>
          This probably isn't what your app is going to look like. Unless your
          designer handed you this screen and, in that case, congrats! You're
          ready to ship. For everyone else, this is where you'll see a live
          preview of your fully functioning app using Ignite.
        </Text>
      </View>
    );
  }
}

- N Sharma

Answer 1

你需要在container里写下justifyContent: "center", alignItems: "center"，就像这样：

container: {
  paddingBottom: Metrics.baseMargin,
  justifyContent: "center", 
  alignItems: "center"
}

如果你只是想将文本居中，可以在 centered 中使用 alignSelf: 'center'

- VolkanSahin45

Answer 2

container 的样式应包括以下内容：

justifyContent: "center",
alignItems: "center"

不是将 Text 本身居中，而是使其所在的容器居中。如果您想让 Text 居中，则应添加以下内容：

alignSelf: 'center'

关于文本样式本身，您可以从官方来源这里获取示例以获取更多信息。

- Xenolion

Answer 3

我相信这可能会帮助你更清楚地理解：
1. justifyContent：帮助你垂直控制视图内容
2. alignItems：帮助你水平控制视图内容
3. alignSelf：帮助你使文本内容居中。
运行示例代码进行演示。

render() {
    return (
      <View style={styles.container}>
        <View style={{ justifyContent: "center", height: 200 }}>
          <Text>justifyContent works in an View vertically</Text>
          <Text>center,flex-start,flex-end</Text>
        </View>
        <View style={{ alignItems: "center" }}>
          <Text>alignItems works in an View Horizontily</Text>
          <Text>center,flex-start,flex-end</Text>
        </View>
        <Text style={styles.textStyle}>To Make Text Center</Text>
      </View>
    );
  }


const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  textStyle: {
    alignSelf: "center",
    alignItems: "center"
  }
});

- Syed Zain Ali

Answer 4

<TouchableOpacity
           style = {styles.submitButton}
           onPress = {
              () => this.login(this.state.email, this.state.password)
           }>
           <Text style = {styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>

文本居中

submitButtonText:{
  color: 'white',
  alignSelf: 'center'
}

- Paramatma Sharan

Answer 5

更新：

  AnyText: {
    textAlign: 'center',
    fontSize: 21,
    fontWeight: 'bold',
  }

- Kiran Jadhav