Блог

Главная - Вопросы по программированию - Как сделать выравнивание текста по центру в абзаце

Как сделать выравнивание текста по центру в абзаце

#react-native

#react-native

Вопрос:

У меня есть текстовый абзац, подобный этому:

 <Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{textAlign:"center"}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

Это выглядит как:

 11112222333344445555

Пока я хочу, чтобы это отображалось как:

 11112222
       3333
44445555

в котором 3333 — это выравнивание текста по центру

как я могу это сделать?

Я пытался установить flexDirection, но это не сработало.

Структура данных немного сложна, например

 {
    { text : 'aaaa'}
    { text: [
        {
            text: [
                { text: 'bbbb' },
                { text: 'cccc', style:'bold' },
                {
                    text : '3333',
                    style: 'center'
                },
                { text: 'dddd'},
            ], style: 'bold'
        },
        { text: 'eeee' }
    ]},
    { text: 'ffff', style:'i' },
    { text: 'gggg' }
}

Поскольку компонент просмотра не может быть вложен в текстовый компонент, поэтому я не могу изменить текст, обернутый 3333 для просмотра.

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

1. Каков ваш ожидаемый результат?

2. 3333 — это выравнивание по центру, в то время как другие показывают выравнивание текста: слева

Ответ №1:

Используйте View компонент в качестве контейнера, затем оберните элементы, которые вы хотите встроить в текстовый компонент. <a rel="noreferrer noopener nofollow" href="https:///dabbott.github.io/react-native-web-player/#code=import React, { Component } from 'react';
import { View, AppRegistry, Text } from 'react-native';

export default class TextInANest extends Component {
render() {
return (

1111
2222

3333

4444
5555

);
}
}

// skip this line if using Create React Native App
AppRegistry.registerComponent(‘TextInANest’, () => TextInANest);
» rel=»nofollow noreferrer»>пример здесь

Редактировать 1:

пример построения:

 <View>
  <text>
    <Text>1111</Text>
    <Text>2222</Text>
  </text>
  <Text style={{textAlign:"center"}}>
    <Text>3333</Text>
  </Text>
  <text>
    <Text>4444</Text>
    <Text>5555</Text>
  </text>
</View>

<a rel="noreferrer noopener nofollow" href="https:///dabbott.github.io/react-native-web-player/#code=import React, { Component } from 'react';
import { View, AppRegistry, Text } from 'react-native';

export default class TextInANest extends Component {
render() {
return (

1111
2222

3333

4444
5555

);
}
}

// skip this line if using Create React Native App
AppRegistry.registerComponent(‘TextInANest’, () => TextInANest);
» rel=»nofollow noreferrer»>рабочий пример здесь

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

1. Но, возможно, текст, который необходимо центрировать, вложен в другой текстовый компонент. Изменение его на view приведет к ошибке.

2. вы проверили пример?

3. пример сработал, поскольку текстовые компоненты находятся непосредственно в компоненте представления. но я пытаюсь показать публикацию абзаца пользователем. Текст, который необходимо центрировать, может быть вложен глубоко в текстовую структуру, смотрите Пример, который я добавляю под своим вопросом. Структура может быть более сложной.

4. согласно документации , вам нужно будет использовать View component, иначе вы не сможете этого сделать

Ответ №2:

Вы можете использовать View, как я упоминал здесь.

   <View style={{alignItems:'flex-start'}}>
    <Text>111111</Text>
  </View>
  <View style={{alignItems:'center'}}>
  <Text>2222222</Text>
  </View>
  <View style={{alignItems:'flex-start'}}>
  <Text>333333</Text>
  </View>

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

1. Но, возможно, текст, который необходимо центрировать, вложен в другой текстовый компонент. Изменение его на view приведет к ошибке.

2. Да, почему бы и нет? Поместите вложенный текстовый компонент только внутри представления и измените его стиль.

3. Это означает, что мне нужно изменить все родительские компоненты для просмотра и перенести многие текстовые компоненты в другой текстовый компонент. Посмотрите, что я добавил в свой вопрос.

Ответ №3:

попробуйте это.

 <Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

Ответ №4:

у меня это работает 

 <View style={{ width: '100%', flexDirection: 'column' }}>
    <Text style={{ width: '100%' }}>1111</Text>
    <Text style={{ width: '100%' }}>2222</Text>
    <Text style={{ textAlign: "center", width: '100%' }}>
        <Text>3333</Text>
    </Text>
    <Text style={{ width: '100%' }}>4444</Text>
    <Text style={{ width: '100%' }}>5555</Text>
</View>