Блог

Главная - Вопросы по программированию - Не удается выровнять текст в React Native

Не удается выровнять текст в React Native

#javascript #reactjs #react-native

Вопрос:

Я новичок в реагировании на родной язык. Я создал с его помощью страницу входа в систему. Я хочу знать, как я могу выровнять Login текст с левой стороны вместо того, чтобы показывать его в центре.

введите описание изображения здесь

Мой код:

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;

Дайте мне знать, что я делаю не так в приведенном выше коде.

Комментарии:

1. Попробуйте выровняться:»гибкий старт» на .head вместо элементов выравнивания:»гибкий старт»

2. Не могли бы вы, пожалуйста, сказать, в чем разница между stretch и flex-start .

3.w3schools.com/cssref/css3_pr_align-items.asp w3schools.com/cssref/…

4. выравнивание-элементы работают с элементом, который задан как гибкий дисплей… Align-self работает с дочерним элементом flex. Как и в вашем случае, контейнер был гибким, а заголовок входа был дочерним элементом элемента flex.

5. Извините, но я предлагаю использовать TextAlign: «слева» вместо использования alignSelf, так как это всего лишь текстовый компонент.

Ответ №1:

alignItems имеет дело с дочерними элементами родительского контейнера, в то время как alignSelf имеет дело с самим элементом.

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

Комментарии:

1. В чем разница между этим и alignItems:'flex-start' , как указано в существующем ответе?

2. alignItems имеет дело с дочерними элементами родительского контейнера, в то время alignSelf как имеет дело с самим элементом.

Ответ №2:

Я не могу проверить это прямо сейчас, но это должно быть что-то вроде этого:

Добавьте атрибуты alignSelf и textAlign в свои head стили.

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

Комментарии:

1. @NanditaSharma: Это нормально, чтобы повысить ответ, опубликованный в качестве комментария, до нового ответа. Таким образом, в идеале ОП может отметить ответ как принятый. (Тем не менее, когда я копирую ответ из комментариев, я обычно отмечаю его как вики-страницу сообщества.)

2. Я не понимаю, что ты пытаешься сказать… Ответ не скопирован и не равен ответу в комментариях 🤔

Метки: