ฉันจะสร้างข้อความในแนวตั้ง (หมุน 90 องศา) ในการตอบสนองแบบเนทีฟได้อย่างไร


108

ฉันจะสร้าง<Text />แนวตั้ง (หมุน 90 องศา) ในปฏิกิริยาเนทีฟได้อย่างไร ฉันต้องการให้มีข้อความทางด้านขวาของหน้าตามขอบหน้าจอ

คำตอบ:


228

คุณสามารถใช้การเปลี่ยนแปลง

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

myStyle: {
    transform: [{ rotate: '90deg'}]
}

@JacobLauritzen ใช้งานได้ใน React Native! ฉันได้ทดสอบแล้วและใช้ได้กับเวอร์ชัน 0.52.0
shimatai

@shimatai สุดยอด! ฉันกำลังตอบกลับความคิดเห็นก่อนหน้านี้ (ตอนนี้ถูกลบไปแล้ว) แต่ไม่ใช่วิธีแก้ปัญหา โซลูชันนี้ใช้งานได้ดี
Jacob Lauritzen

สำหรับกรณีของฉันข้อความถูกรวมไว้ในแบบสัมผัส และหลังจากการหมุนพื้นที่ที่สัมผัสได้ดูเหมือนจะไม่เปลี่ยนแปลง ความคิดใด ๆ ?
chengsam

@chengsam Offhand ฉันเดาว่าคุณอาจต้องหมุน Touchable ด้วย (หรืออาจจะหมุน Touch ก็จะหมุนข้อความด้วยถ้าเป็นเด็ก)
Matthew McCord

1

อย่างมีสไตล์ใช้การแปลงเพื่อหมุนและองค์ประกอบ

style={{transform: [{ rotate: '180deg' }]}}

เช่น:

<View style={{transform: [{ rotate: '180deg' }]}} />

-1

มุมมองที่สร้างสรรค์

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

เพิ่มรูปแบบการแปลง: [{หมุน: '14deg'}] หากคุณกำหนดตำแหน่งมุมมองแบบสัมบูรณ์จะไม่มีผลกับมุมมองอื่น!

  • การหมุนเริ่มจาก 0 ถึง 360 องศา

       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,
    

    }, ใส่คำอธิบายภาพที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.