無法在 React Native 中對齊文本

Question

我是 React Native 的新手。 我用它創建了一個登錄頁面。 我想知道如何在左側對齊Login文本，而不是在中心顯示。

我的代碼：

登錄.js

import React from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';

const Login = () => {

  return (

     <View style={styles.container}>
        <Text style={styles.head}>
             Login
        </Text>
        <TextInput placeholder="Username" style={styles.input}/>
        <TextInput placeholder="Password" style={styles.input}/>
        <TouchableOpacity style={styles.button}>
            <Text style={styles.textStyle}>LOGIN</Text>
        </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'white'
},
head:{
   alignItems:'flex-start',
   fontWeight:'bold',
   fontSize:30,
   marginBottom:15
},
input:{
    height:50,
    borderRadius:5,
    backgroundColor:'#ededed',
    alignSelf:'stretch',
    marginLeft:15,
    marginRight:15,
    marginBottom:8,
    paddingLeft:15
},
button:{
    backgroundColor:'#e57373',
    alignSelf:'stretch',
    borderRadius:5,
    marginLeft:15,
    marginRight:15,
    alignItems:'center',
    padding: 15,
},
textStyle:{
    fontWeight:'bold',
    color:'white'
}
});

export default Login;

讓我知道我在上面的代碼中做錯了什么。

Answer 1

我現在無法測試它，但它應該是這樣的：

將alignSelf和textAlign屬性添加到您的head樣式中。

head: {
    alignItems:'flex-start',
    alignSelf: 'stretch',
    fontWeight:'bold',
    fontSize:30,
    marginBottom:15,
    textAlign: 'left'
},

Answer 2

alignItems 關注父容器的子元素，而 alignSelf 處理元素本身。

head:{
   alignSelf:'flex-start',
   // ...other styles
}