ReactNative: bagaimana cara memusatkan teks?

212

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;
keuangan
sumber
Suka ini: rnplay.org/apps/1hbnSA ?
Cherniv
ini tidak berpusat horizontal
itinance
1
ok, jadi ini: rnplay.org/apps/1hbnSA , diperbarui
Cherniv
WAAAA ... textAlign? saya tahu itu akan menjadi sesuatu yang sangat bodoh .... Anda harus memposting ini sebagai jawaban
itinance

Jawaban:

356

Dari headline'gaya hapus height, justifyContentdan alignItems. Ini akan memusatkan teks secara vertikal. Tambahkan textAlign: 'center'dan itu akan memusatkan teks secara horizontal.

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }
Cherniv
sumber
16
Tidak bekerja dengan widthkecuali Anda membungkusnya <View>denganjustifyContent: 'center', alignItems: 'center',
Ryan Walker
59

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) ke TextKomponen untuk secara otomatis menyesuaikan ukuran di dalam simpul induk.

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

Anda juga dapat menambahkan berikut ini di Komponen Teks Anda:

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

Atau Anda dapat menambahkan yang berikut ke dalam induk dari komponen Teks:

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

atau keduanya

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

atau ketiganya

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

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

garrettmac
sumber
ini harus diharapkan: <Text style = {{textAlignVertical: "center", textAlign: "center",}}> Hiiiz </Text>
Tushar Pandey
pria yang Anda simpan 1,5 jam saya. Saya mencoba melakukan hal yang sama tetapi tidak bisa sampai jawaban ini textAlignVertical: "center", textAlign: "center" sebagai:, sebagai <Text /> Component Style.
ganeshdeshmukh
textAlignVertical hanya untuk Android. Tidak satu pun dari solusi ini yang menyelaraskan teks saya secara vertikal, hanya secara horizontal.
sudo
14

Setel gaya-gaya ini ke komponen gambar: {textAlignVertical: "center", textAlign: "center"}

mocanSergiu666
sumber
13
textAlignVertical: "center"

adalah keajaiban nyata.

Muzammil
sumber
9

ini adalah contoh untuk penyelarasan Horizontal dan Vertikal secara bersamaan

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>
Bashirpour
sumber
Terima kasih atas tip bahwa gaya inline harus disertakan dalam {{double-curly-braces}}.
MarkHu
6

Perataan tengah horizontal dan vertikal

<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
     <Text> Example Test </Text>
</View>
Bashirpour
sumber
Hanya solusi yang berfungsi untuk saya dalam hal memusatkan <Text> di dalam <View> tidak hanya secara horizontal, tetapi juga secara vertikal. Terima kasih!
RuntimeError
4

Anda dapat menggunakan alignSelfproperti pada komponen Teks

{ alignSelf : "center" }
Meenu Negi
sumber
4

Di mana pun Anda memiliki Textkomponen di halaman Anda, Anda hanya perlu mengatur gaya Textkomponen.

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

Anda tidak perlu menambahkan properti penataan lainnya, ini adalah sihir spektakuler yang akan membuat Anda teks di tengah UI Anda.

Hardik Virani
sumber
2

Tambah sederhana

textAlign: "center"

di styleSheet Anda, itu saja. Semoga ini bisa membantu.

edit: "pusat"

Raghib Arshi
sumber
2

Properti berikut dapat digunakan: {{alignItems: 'center'}}

<View style={{alignItems: 'center'}}>
 <Text>Hello im centered text{this.props.name}!</Text>
</View>
Omar bakhsh
sumber
1
Bahkan jika ini bisa menjadi solusi untuk pertanyaan itu, silakan tambahkan beberapa penjelasan lagi agar kita semua bisa belajar.
harmonica141
Harap perbaiki karena Anda menggunakan dua tanda bintang untuk mengedarkan koreksi utama tetapi tidak jelas dan bagian lainnya membingungkan
Frederiko Cesar
2

bekas

textalign: center

pada tampilan

Sanjib Suna
sumber
2

Atur dalam tampilan Induk

justifyContent:center

dan dalam tampilan anak alignSelf: center

Sanson Jib
sumber
Kunci harus dalam peti unta justifyContentdanalignSelf
Siddharth
1

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:

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"
    }
  }
Gunnar Karlsson
sumber
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>
    )

}
Giang
sumber
0

pertama tambahkan fleksibel tampilan induk: 1, justifyContent: 'center', alignItems: 'center'

kemudian dalam teks tambahkan teksAlign: 'tengah'


sumber