Как центрировать текст в 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;
reactjs
flexbox
react-native
itinance
источник
источник
Ответы:
От
headline
"стиль удалитьheight
,justifyContent
иalignItems
. Это будет центрировать текст по вертикали. Добавьте,textAlign: 'center'
и текст будет центрирован по горизонтали.источник
width
если вы не оберните его<View>
сjustifyContent: 'center', alignItems: 'center',
Уже ответил, но я хотел бы добавить немного больше по теме и различные способы сделать это в зависимости от вашего варианта использования.
Вы можете добавить
adjustsFontSizeToFit={true}
(в настоящее время недокументированное) вText
Компонент, чтобы автоматически настроить размер внутри родительского узла.Вы также можете добавить следующее в ваш текстовый компонент:
Или вы можете добавить следующее в родительский элемент компонента Text:
или оба
или все три
Все зависит от того, что вы делаете. Вы также можете проверить мой полный блог в теме
https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b
источник
textAlignVertical: "center", textAlign: "center"
как <Text /> Component Style.Установите эти стили для компонента изображения: {textAlignVertical: "center", textAlign: "center"}
источник
настоящая магия
источник
это пример горизонтального и вертикального выравнивания одновременно
источник
Горизонтальное и вертикальное выравнивание по центру
источник
Вы можете использовать
alignSelf
свойство в текстовом компонентеисточник
Везде, где у вас есть
Text
компонент на вашей странице, вам просто нужно установить стильText
компонента.вам не нужно добавлять какие-либо другие свойства стилей, это захватывающая магия, она установит текст в центре вашего интерфейса.
источник
Просто добавить
в вашей таблице стилей, вот и все. Надеюсь, это поможет.
редактировать: "центр"
источник
Следующее свойство может быть использовано:
{{alignItems: 'center'}}
источник
используемый
TextAlign: центр
на вид
источник
Установить в родительском представлении
и в дочернем представлении alignSelf: center
источник
justifyContent
иalignSelf
В дополнение к случаям использования, упомянутым в других ответах:
Чтобы центрировать текст в конкретном случае использования BottomTabNavigator , не забудьте установить для showIcon значение false (даже если у вас нет значков в TabNavigator). В противном случае текст будет сдвинут к нижней части Tab.
Например:
источник
источник
сначала добавьте в родительском представлении flex: 1, justifyContent: 'center', alignItems: 'center'
затем в тексте добавьте textAlign: 'center'
источник