Bagaimana cara memusatkan Teks di ReactNative baik secara horizontal maupun vertikal?
Saya punya contoh aplikasi di rnplay.org di mana justifyContent = "center" dan alignItems = "center" tidak berfungsi: https://rnplay.org/apps/AoxNKQ
Teks harus di tengah. Dan mengapa ada margin di bagian atas antara teks (kuning) dan wadah induk?
Kode:
'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
keuangan
sumber
sumber
Jawaban:
Dari
headline
'gaya hapusheight
,justifyContent
danalignItems
. Ini akan memusatkan teks secara vertikal. TambahkantextAlign: 'center'
dan itu akan memusatkan teks secara horizontal.sumber
width
kecuali Anda membungkusnya<View>
denganjustifyContent: 'center', alignItems: 'center',
Sudah dijawab tetapi saya ingin menambahkan sedikit lebih banyak pada topik dan berbagai cara untuk melakukannya tergantung pada kasus penggunaan Anda.
Anda dapat menambahkan
adjustsFontSizeToFit={true}
(saat ini tidak berdokumen) keText
Komponen untuk secara otomatis menyesuaikan ukuran di dalam simpul induk.Anda juga dapat menambahkan berikut ini di Komponen Teks Anda:
Atau Anda dapat menambahkan yang berikut ke dalam induk dari komponen Teks:
atau keduanya
atau ketiganya
Itu semua tergantung pada apa yang Anda lakukan. Anda juga dapat memeriksa posting blog lengkap saya tentang topik ini
https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b
sumber
textAlignVertical: "center", textAlign: "center"
sebagai:, sebagai <Text /> Component Style.Setel gaya-gaya ini ke komponen gambar: {textAlignVertical: "center", textAlign: "center"}
sumber
adalah keajaiban nyata.
sumber
ini adalah contoh untuk penyelarasan Horizontal dan Vertikal secara bersamaan
sumber
Perataan tengah horizontal dan vertikal
sumber
Anda dapat menggunakan
alignSelf
properti pada komponen Tekssumber
Di mana pun Anda memiliki
Text
komponen di halaman Anda, Anda hanya perlu mengatur gayaText
komponen.Anda tidak perlu menambahkan properti penataan lainnya, ini adalah sihir spektakuler yang akan membuat Anda teks di tengah UI Anda.
sumber
Tambah sederhana
di styleSheet Anda, itu saja. Semoga ini bisa membantu.
edit: "pusat"
sumber
Properti berikut dapat digunakan:
{{alignItems: 'center'}}
sumber
bekas
textalign: center
pada tampilan
sumber
Atur dalam tampilan Induk
dan dalam tampilan anak alignSelf: center
sumber
justifyContent
danalignSelf
Selain kasus penggunaan yang disebutkan dalam jawaban lain:
Untuk memusatkan teks dalam kasus penggunaan khusus BottomTabNavigator , ingat untuk mengatur showIcon ke false (bahkan jika Anda tidak memiliki ikon di TabNavigator). Kalau tidak, teks akan didorong ke bawah Tab.
Sebagai contoh:
sumber
sumber
pertama tambahkan fleksibel tampilan induk: 1, justifyContent: 'center', alignItems: 'center'
kemudian dalam teks tambahkan teksAlign: 'tengah'
sumber