Bagaimana cara membuat teks vertikal (diputar 90 derajat) di react native?

103

Bagaimana cara membuat <Text />vertikal (diputar 90 derajat) di react native? Saya ingin memiliki beberapa teks di sisi kanan halaman di sepanjang tepi layar.

Dev01
sumber

Jawaban:

221

Anda bisa menggunakan transformasi.

https://facebook.github.io/react-native/docs/transforms.html#proptypes

myStyle: {
    transform: [{ rotate: '90deg'}]
}
d-vine
sumber
@JacobLauritzen bekerja di React Native! Saya sudah menguji sekarang dan berfungsi dengan versi 0.52.0.
shimatai
@imatai luar biasa! Saya membalas komentar sebelumnya (sekarang dihapus), bukan solusinya. Solusinya bekerja dengan baik.
Jacob Lauritzen
Untuk kasus saya, teks dibungkus dalam Touchable. Dan setelah rotasi, area yang dapat disentuh tampaknya tetap tidak berubah. Ada ide?
chengsam
@chengsam Begitu saja Saya akan menebak bahwa Anda mungkin juga perlu memutar Touchable (atau mungkin memutar Touchable juga akan memutar teks jika itu anak-anak).
Matthew McCord
-1

tampilan pembuat

            <View style={styles.arrow_1_6} ></View>
          

tambahkan dalam transformasi gaya: [{rotate: '14deg'}], jika Anda membuat posisi tampilan mutlak, itu tidak akan memengaruhi tampilan lain!

  • putaran mulai dari 0 hingga 360 derajat.

       arrow_1_6: {
       transform: [{ rotate: '14deg' }],
      width: 260,
      marginTop: 145,
      position: 'absolute',
      marginLeft: 75,
      backgroundColor: 'orange',
      height: 4,
      flexDirection: "row",
      padding: 0,
      alignItems: 'center',
      justifyContent: 'flex-start',
      borderBottomColor: '#075fff',
      borderBottomWidth: 4,
    

    }, masukkan deskripsi gambar di sini

Omar bakhsh
sumber