Отображение вертикального текста в ящике, похожем на react native

#javascript #typescript #react-native

Вопрос:

Мне нужно отобразить текст в вертикальном положении. текст будет динамичным, поэтому он может быть коротким или длинным. я добавил скриншот того, что я хочу. может ли кто-нибудь поделиться кодом для этого типа пользовательского интерфейса. заранее спасибо.

Подобный этому

видишь это, вот что у меня есть

 <View>
  <View style={{}}>
    <View
      style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
    >
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          alignSelf: "center",
          transform: [{ rotate: "90deg" }],
          color: "white",
          fontWeight: "bold",
        }}
      >
        Short
      </Text>
    </View>
  </View>

  <View style={{}}>
    <View
      style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
    >
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          alignSelf: "center",
          transform: [{ rotate: "90deg" }],
          color: "white",
          fontWeight: "bold",
        }}
      >
        Long Text
      </Text>
    </View>
  </View>
</View>;

1. эй, вы можете использовать свойство css для текста transform: rotate<X|Y>(<Degs_Number>deg);

2. Привет @kunalpanchal, я так и сделал. но это не работает.

3. не могли бы вы поделиться своим фрагментом кода здесь, чтобы мы могли его отладить ?

4. @kunalpanchal я обновил свой вопрос. теперь вы можете увидеть мой код.

Ответ №1:

У вас будут проблемы, если вы попытаетесь применить преобразования по одному во всех <Text /> . Вместо этого попробуйте применить преобразования в родителе <View /> , что даст вам больше контроля над тем, что происходит.

 const App = () => {
  const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
  const height = 80;

  return (
    <View
      style={{
        transform: [
          {rotate: '-90deg'}, // negative degrees is important for this calculations and have the text face the content as your desired result picture shows
          {translateX: -(screenHeight / 2)}, // rotation is being applied in the center so it's safe to move it half screen
          {translateX: height / 2}, // correct the x translation with half of our component height so it stays on screen
          {translateY: -screenWidth}, // rotation is being applied in the center so it's safe to move it full screen width
          {translateY: height / 2}, // correct the y translation with half of our component height so it stays on screen
        ],
        width: screenHeight, // swap screen width with screen height so the background covers the entirety of the screen
        height, // fixed height is important to apply corrections on transform you could also use a ref and get this size on runtime
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
      }}>
      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Short
      </Text>

      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Long Text
      </Text>

      <Text
        style={{
          fontSize: 20,
          color: 'white',
          fontWeight: 'bold',
          margin: 10,
        }}>
        Very Long Long Text
      </Text>
    </View>
  );
};

Вы можете проверить результат здесь.