如何在 React Native 中正确旋转视图？答案

【问题标题】：How to rotate a View properly in React Native?如何在 React Native 中正确旋转视图？
【发布时间】：2021-07-13 07:06:53
【问题描述】：

My code 
   <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}>
<Text>Hi</Text>
      </View>

结果：

这不像我预期的那样工作。视图会旋转，但宽度和高度是根据手机纵向模式计算的，并且视图处于横向模式，这会破坏设计。我尝试了如下解决方法

import { useWindowDimensions } from 'react-native';
    import React, { useState, useEffect,useCallback, useRef  } from 'react';
    import { Text,View} from "react-native";
    const FullScreenMediaPlayer = (props) => {
      const windowWidth = useWindowDimensions().width;
      const windowHeight = useWindowDimensions().height;
        return (
          <View style={{width:windowHeight,height:windowWidth,borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}>
    <Text>Hui</Text>
          </View>
        );
    }
    
    export default FullScreenMediaPlayer;

结果：视图宽度仍然不是屏幕宽度？如何在横向模式下旋转 View 并使其高度和宽度与屏幕的高度和宽度相同？

PS：我不想使用orientation包我只是想纯粹基于样式来实现这个

【问题讨论】：

你想达到什么目的？
@LeriGogsadze 我想在不使用方向的情况下将视图更改为横向模式。我在这个视图中有内容

标签： css react-native jsx

【解决方案1】：

据我所知：

要将高度和宽度设置为 100%，可以使用

style={{width: '100%', height: '100%'}}

它适用于纵向和横向方向

要旋转某些东西，您可以使用（如果您使用 JSX）

transform: 'rotate(20deg)'

所以我认为答案是：

<View style={{width: '100%', height: '100%', borderColor:"red", borderWidth:4, flex:1, transform: 'rotate(20deg)'}}>
    <Text>Hui</Text>
</View>

【讨论】：

我还没查，哪个不行？一号还是二号？ @Arjun

【解决方案2】：

这是你想要的吗？

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { View, Text, Dimensions } from 'react-native';

const FullScreenMediaPlayer = (props) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View
        style={{
          width: Dimensions.get('window').height,
          height: Dimensions.get('window').width,
          borderColor: 'red',
          borderWidth: 4,
          transform: [
            { rotate: '90deg' },
          ],
        }}>
        <Text>Hui</Text>
      </View>
    </View>
  );
};

export default FullScreenMediaPlayer;

【讨论】：