如何在本机中设置文本

Question

您好我想设置Text位于中心，我尝试justifyContent和alignItems居中，但它对我不起作用，文字显示在顶部。< / p>

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>
    );
  }
}

Answer 1

你需要写 justifyContent: "center", alignItems: "center" 在container这样：

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

如果您只想制作文字中心，可以在alignSelf: 'center'

中使用centered

Answer 2

container代码的样式应包括：

justifyContent: "center",
alignItems: "center"

和不到Text本身。但如果您想自己制作Text中心，那么您应该添加：

alignSelf: 'center'

到Text样式本身。您可以从官方来源here for more information获取示例。

Answer 3

我相信这可能会清除你的概念 1. justifyContent ：帮助您控制View 垂直的内容  2. alignItems ：帮助您控制View 水平的内容  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"
  }
});

Answer 4

  

已更新：-

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

Answer 5

<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'
}