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.

react-native

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

— Omar bakhsh
źródło