ReactNative: как центрировать текст?

212

Как центрировать текст в ReactNative как по горизонтали, так и по вертикали?

У меня есть пример приложения в rnplay.org, где justifyContent = "center" и alignItems = "center" не работает: https://rnplay.org/apps/AoxNKQ

Текст должен быть в центре. И почему между текстом (желтым) и родительским контейнером есть поле сверху?

Код:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>

                </View>
                <View style={styles.otherContainer}>
                </View>
            </View>
    );
  }
});

var styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
    },

    topBox: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'lightgray',
        justifyContent: 'center',
        alignItems: 'center',
    },
    headline: {
        fontWeight: 'bold',
        fontSize: 18,
    marginTop: 0,
        width: 200,
        height: 80,
    backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
    },

  otherContainer: {
        flex: 4,
        justifyContent: 'center',
        alignItems: 'center',
    backgroundColor: 'green',
    },


});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;
itinance
источник
это не по горизонтали
itinance
1
хорошо, так это: rnplay.org/apps/1hbnSA , обновлено
Чернов
WAAAA ... textAlign? я знал, что это будет что-то действительно глупое .... вы должны опубликовать это как ответ
itinance

Ответы:

356

От headline"стиль удалить height, justifyContentи alignItems. Это будет центрировать текст по вертикали. Добавьте, textAlign: 'center'и текст будет центрирован по горизонтали.

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }
Cherniv
источник
16
Не работает с, widthесли вы не оберните его <View>сjustifyContent: 'center', alignItems: 'center',
Ryan Walker
59

Уже ответил, но я хотел бы добавить немного больше по теме и различные способы сделать это в зависимости от вашего варианта использования.

Вы можете добавить adjustsFontSizeToFit={true}(в настоящее время недокументированное) в TextКомпонент, чтобы автоматически настроить размер внутри родительского узла.

  <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

Вы также можете добавить следующее в ваш текстовый компонент:

<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

Или вы можете добавить следующее в родительский элемент компонента Text:

<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text>Hiiiz</Text>
</View>

или оба

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

или все три

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text adjustsFontSizeToFit={true} 
           numberOfLines={1} 
           style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

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

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

garrettmac
источник
этого следует ожидать: <Text style = {{textAlignVertical: "center", textAlign: "center",}}> Hiiiz </ Text>
Tushar Pandey
человек ты спас мне 1,5 часа. Я пытался сделать то же самое, но не смог до этого ответа как:, textAlignVertical: "center", textAlign: "center" как <Text /> Component Style.
Ганешдешмух
textAlignVertical - только для Android. Ни одно из этих решений не выравнивает мой текст по вертикали, только по горизонтали.
SUDO
14

Установите эти стили для компонента изображения: {textAlignVertical: "center", textAlign: "center"}

mocanSergiu666
источник
13
textAlignVertical: "center"

настоящая магия

Muzammil
источник
9

это пример горизонтального и вертикального выравнивания одновременно

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>
Bashirpour
источник
Спасибо за подсказку, что встроенные стили должны быть заключены в {{двойные фигурные скобки}}.
MarkHu
6

Горизонтальное и вертикальное выравнивание по центру

<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
     <Text> Example Test </Text>
</View>
Bashirpour
источник
Единственное решение, которое работало для меня с точки зрения центрирования <Text> внутри <View> не только по горизонтали, но и по вертикали. Спасибо!
RuntimeError
4

Вы можете использовать alignSelfсвойство в текстовом компоненте

{ alignSelf : "center" }
Меену Неги
источник
4

Везде, где у вас есть Textкомпонент на вашей странице, вам просто нужно установить стиль Textкомпонента.

 <Text style={{ textAlign: 'center' }}> Text here </Text>

вам не нужно добавлять какие-либо другие свойства стилей, это захватывающая магия, она установит текст в центре вашего интерфейса.

Хардик Вирани
источник
2

Просто добавить

textAlign: "center"

в вашей таблице стилей, вот и все. Надеюсь, это поможет.

редактировать: "центр"

Рагиб Арши
источник
2

Следующее свойство может быть использовано: {{alignItems: 'center'}}

<View style={{alignItems: 'center'}}>
 <Text>Hello im centered text{this.props.name}!</Text>
</View>
Омар Бахш
источник
1
Даже если это может быть решением вопроса, пожалуйста, добавьте еще несколько объяснений, чтобы мы все могли учиться.
harmonica141
Пожалуйста, улучшите его, потому что вы используете две звездочки для распространения основной коррекции, но это не ясно, а другая часть
Фредерико Сезар
2

используемый

TextAlign: центр

на вид

Санджиб Суна
источник
2

Установить в родительском представлении

justifyContent:center

и в дочернем представлении alignSelf: center

Сансон Джиб
источник
Ключи должны быть в случае верблюда justifyContentиalignSelf
Сиддхарт
1

В дополнение к случаям использования, упомянутым в других ответах:

Чтобы центрировать текст в конкретном случае использования BottomTabNavigator , не забудьте установить для showIcon значение false (даже если у вас нет значков в TabNavigator). В противном случае текст будет сдвинут к нижней части Tab.

Например:

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen
}, {
  tabBarOptions: {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    showIcon: false, //do this
    labelStyle: {
      fontSize: 20,
      textAlign: 'center',
    },
    tabStyle: {
      backgroundColor: 'grey',
      marginTop: 0,
      textAlign: 'center',
      justifyContent: 'center',
      textAlignVertical: "center"
    }
  }
Гуннар Карлссон
источник
0
const styles = StyleSheet.create({
        navigationView: {
        height: 44,
        width: '100%',
        backgroundColor:'darkgray',
        justifyContent: 'center', 
        alignItems: 'center' 
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
        textAlign: 'center',
    },
})


render() {
    return (
        <View style = { styles.navigationView }>
            <Text style = { styles.titleText } > Title name here </Text>
        </View>
    )

}
Жанг
источник
0

сначала добавьте в родительском представлении flex: 1, justifyContent: 'center', alignItems: 'center'

затем в тексте добавьте textAlign: 'center'


источник