Bagaimana untuk Menghalang Teks Asli React daripada Melimpah dan Mencapai Teks Berpusat Dalam Lebar Tertentu?

Isu Pemangkasan Teks Asli React: Penyelesaian Komprehensif

Isu yang diterangkan dalam gesaan timbul apabila teks dalam elemen React Native melangkauinya sempadan yang dimaksudkan, menyebabkan ia melimpah keluar dari skrin. Untuk menangani isu ini dan mengekalkan reka letak teks berpusat dalam lebar yang ditentukan, seperti 80% daripada elemen induknya, kita perlu memanfaatkan keupayaan flexbox.

Kod yang disediakan dalam gesaan memperkenalkan beberapa elemen React Native bersarang di antara satu sama lain, dengan gaya tertentu digunakan pada setiap satu. Elemen teks yang dimaksudkan, ditakrifkan dengan numberOfLines={5}, mengehadkan bilangan baris yang dipaparkan pada skrin. Walau bagaimanapun, ia gagal menghalang teks daripada melebihi lebar yang diingini.

Penyelesaian melibatkan pengubahsuaian sifat flex Paparan induk yang mengandungi elemen teks dan melaraskan tetapan flexWrapnya. Dengan menetapkan flexWrap kepada 'bungkus', kami membenarkan elemen teks untuk membalut ke beberapa baris, menghalangnya daripada melimpah keluar dari skrin. Selain itu, kami menetapkan flexShrink kepada '1' untuk memastikan elemen teks mengecut apabila Paparan induknya mempunyai ruang terhad.

Berikut ialah kod yang dikemas kini:

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: 'grey'}}>
  <View style={{flex: 0.5, flexDirection: 'column', alignItems: 'center', backgroundColor: 'blue'}}>
    <View style={{flex: 0.3, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', flexShrink: 1}}>
      <Text style={{backgroundColor: 'green', fontSize: 16, color: 'white', textAlign: 'center', flexWrap: 'wrap'}}>
        Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
      </Text>
    </View>
  </View>
  <View style={{flex: 0.5, flexDirection: 'column', alignItems: 'center', backgroundColor: 'orange'}}>
    <View style={{flex: 0.3, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', flexShrink: 1}}>
      <Text style={{backgroundColor: 'green', fontSize: 16, color: 'white', textAlign: 'center', flexWrap: 'wrap'}}>
        Some other long text which you can still do nothing about.. Off the screen we go then.
      </Text>
    </View>
  </View>
</View>

Dengan pengubahsuaian ini, teks akan kekal terkurung dalam lebar yang ditentukan sambil membalut pada berbilang baris agar sesuai dengan ruang yang tersedia. Pendekatan ini melaraskan secara dinamik kepada pelbagai saiz skrin sambil mengekalkan reka letak teks yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Teks Asli React daripada Melimpah dan Mencapai Teks Berpusat Dalam Lebar Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!