Jak mogę ustawić tekst pionowo (obrócony o 90 stopni) w natywnym reagowaniu?

103

Jak mogę zmienić położenie w <Text />pionie (obrócone o 90 stopni) w natywnej reakcji? Chcę, aby tekst znajdował się po prawej stronie, wzdłuż krawędzi ekranu.

Dev01
źródło

Odpowiedzi:

221

Możesz użyć transformacji.

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

myStyle: {
    transform: [{ rotate: '90deg'}]
}
d-vin
źródło
@JacobLauritzen, działa w React Native! Testowałem teraz i działa z wersją 0.52.0.
shimatai
@shimatai awesome! Odpowiadałem na poprzedni (teraz usunięty) komentarz, ale nie rozwiązanie. Rozwiązanie działa świetnie.
Jacob Lauritzen
W moim przypadku tekst jest zawinięty w Touchable. A po obróceniu obszar dotykowy wydaje się pozostać niezmieniony. Dowolny pomysł?
chengsam
@chengsam Offhand Domyślam się, że może być konieczne obrócenie Touchable (lub może obracanie Touchable spowoduje również obrócenie tekstu, jeśli jest to dziecko).
Matthew McCord
-1

widok kreacji

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

dodaj transformację stylu: [{rotate: '14deg'}], jeśli ustawisz pozycję widoku jako bezwzględną, nie wpłynie to na inny widok!

  • Obrót zaczyna się od 0 do 360 st.

       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,
    

    }, wprowadź opis obrazu tutaj

Omar bakhsh
źródło