Jak wyśrodkować tekst w ReactNative zarówno w poziomie, jak i w pionie?
Mam przykładową aplikację w rnplay.org, w której justifyContent = „center” i alignItems = „center” nie działa: https://rnplay.org/apps/AoxNKQ
Tekst powinien być wyśrodkowany. I dlaczego u góry między tekstem (żółty) a kontenerem macierzystym jest margines?
Kod:
'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
źródło
źródło
Odpowiedzi:
Od
headline
"styl usuńheight
,justifyContent
aalignItems
. Wyśrodkuje tekst pionowo. DodajtextAlign: 'center'
i wyśrodkuje tekst w poziomie.źródło
width
chyba owinąć go w<View>
przyjustifyContent: 'center', alignItems: 'center',
Już odpowiedziałem, ale chciałbym dodać trochę więcej na ten temat i różne sposoby na zrobienie tego w zależności od przypadku użycia.
Możesz dodać
adjustsFontSizeToFit={true}
(obecnie nieudokumentowane) doText
Component, aby automatycznie dopasować rozmiar w węźle nadrzędnym.Możesz również dodać następujące elementy w swoim Składniku tekstowym:
Lub możesz dodać następujące elementy do elementu nadrzędnego komponentu Text:
lub oba
lub wszystkie trzy
Wszystko zależy od tego, co robisz. Możesz także sprawdzić mój pełny post na blogu na ten temat
https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b
źródło
textAlignVertical: "center", textAlign: "center"
jako <Tekst /> Styl komponentu.Ustaw te style na komponent obrazu: {textAlignVertical: „center”, textAlign: „center”}
źródło
to prawdziwa magia.
źródło
jest to przykład jednoczesnego wyrównania w poziomie i pionie
źródło
Poziome i pionowe wyrównanie do środka
źródło
Możesz użyć
alignSelf
właściwości składnika Textźródło
Gdziekolwiek masz
Text
komponent na swojej stronie, musisz ustawić stylText
komponentu.nie musisz dodawać żadnych innych właściwości stylizacji, jest to spektakularna magia, która ustawi tekst na środku interfejsu użytkownika.
źródło
Proste dodawanie
w twoim stylu Arkusz, to wszystko. Mam nadzieję, że to pomoże.
edycja: „centrum”
źródło
Można użyć następującej właściwości:
{{alignItems: 'center'}}
źródło
używany
textalign: center
na widok
źródło
Ustaw w widoku rodzica
oraz w widoku podrzędnym alignSelf: center
źródło
justifyContent
ialignSelf
Oprócz przypadków użycia wymienionych w innych odpowiedziach:
Aby wyśrodkować tekst w konkretnym przypadku użycia BottomTabNavigator , pamiętaj, aby ustawić showIcon na false (nawet jeśli nie masz ikon w TabNavigator). W przeciwnym razie tekst zostanie przesunięty w kierunku dolnej części Tab.
Na przykład:
źródło
źródło
najpierw dodaj w widoku nadrzędnym flex: 1, justifyContent: 'center', alignItems: 'center'
następnie w tekście dodaj tekstAlign: 'center'
źródło