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.

react-native

— 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,

— Omar bakhsh
sumber