reactjs - justifycontent - texto justificado react native
ReactNative: ¿cómo centrar el texto? (12)
Añadir simple
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>
)
}
en su hoja de estilo, eso es todo. Espero que esto ayude.
¿Cómo centrar el texto en ReactNative tanto en horizontal como en vertical?
Tengo una aplicación de ejemplo en rnplay.org donde justifyContent = "center" y alignItems = "center" no funciona: https://rnplay.org/apps/AoxNKQ
El texto debe estar centrado. ¿Y por qué hay un margen en la parte superior entre el texto (amarillo) y el contenedor principal?
Código:
''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;
Además de los casos de uso mencionados en las otras respuestas:
Para centrar el texto en el caso de uso específico de un BottomTabNavigator , recuerde establecer showIcon en falso (incluso si no tiene iconos en el TabNavigator). De lo contrario, el texto se empujará hacia la parte inferior de la pestaña.
Por ejemplo:
<View **style={{alignItems: ''center''}}**>
<Text>Hello im centered text{this.props.name}!</Text>
</View>
Alineación central horizontal y vertical
<View style={{flex: 1, justifyContent: ''center'',alignItems: ''center''}}>
<Text> Example Test </Text>
</View>
Del estilo del
headline
, elimine la
height
,
justifyContent
y
alignItems
.
Centrará el texto verticalmente.
Agregue
textAlign: ''center''
y centrará el texto horizontalmente.
headline: {
textAlign: ''center'', // <-- the magic
fontWeight: ''bold'',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: ''yellow'',
}
Dondequiera que tenga un componente de
Text
en su página, solo necesita establecer el estilo del componente de
Text
.
<Text style={{ textAlign: ''center'' }}> Text here </Text>
no necesita agregar ninguna otra propiedad de estilo, esta es una magia espectacular que colocará el texto en el centro de su interfaz de usuario.
Establezca estos estilos en el componente de imagen: {textAlignVertical: "center", textAlign: "center"}
Este es un ejemplo de alineación horizontal y vertical simultáneamente
<View style={{width: 200, flexDirection: ''row'',alignItems: ''center''}}>
<Text style={{width: ''100%'',textAlign: ''center''}} />
</View>
Puede usar la propiedad
alignSelf
en el componente Text
{ alignSelf : "center" }
Ya respondí, pero me gustaría agregar un poco más sobre el tema y diferentes formas de hacerlo dependiendo de su caso de uso.
Puede agregar
adjustsFontSizeToFit={true}
(actualmente no documentado) al Componente de
Text
para ajustar automáticamente el tamaño dentro de un nodo primario.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
También puede agregar lo siguiente en su Componente de texto:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
O puede agregar lo siguiente en el elemento primario del componente Texto:
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>
o ambos
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
o los tres
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true}
numberOfLines={1}
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
Todo depende de lo que estés haciendo. También puedes consultar mi publicación de blog completa sobre el tema
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"
}
}
textAlignVertical: "center"
Es la verdadera magia.
<View **style={{alignItems: ''center''}}**> <Text>Hello im centered text{this.props.name}!</Text> </View>