Question

我目前正在开始学习功能组件。我尝试使用一个既允许纵向又可以横向的屏幕，而该应用程序的其余部分仅允许纵向。

我的方法是使用expo-screen-orientation来检测方向变化并锁定屏幕的方向。在我的App.js组件中，我称之为：

ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);

这很好用，方向已锁定。

在我要更改方向的屏幕上，我想根据方向呈现不同的内容。这是我的组件代码：

function MyComponent() {
  const [orientation, setOrientation] = useState(
    ScreenOrientation.Orientation.PORTRAIT_UP
  );

  useFocusEffect(
    React.useCallback(() => { //when focused, allow all orientations
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL);
      return () => { //when unfocused change lock back to portrait
        ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.PORTRAIT_UP
        );
      };
    }, [])
  );

  ScreenOrientation.addOrientationChangeListener(async () => {
    let orientation = null;
    await ScreenOrientation.getOrientationAsync().then((orientationId) => {
      orientation = ScreenOrientation.Orientation[orientationId];
      setOrientation(orientation);
    });
  });


  let result = null;
  if (
    orientation === ScreenOrientation.Orientation.PORTRAIT_UP ||
    orientation === ScreenOrientation.Orientation.PORTRAIT_DOWN
  ) {
    result = <Text>Do something</Text>;
  } else if (
    orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
    orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
  ) {
    result = <Text>Do something else</Text>;
  }
  return result;
}

export default MyComponent;

不幸的是，此组件始终为空。我在这里做错了什么

根据方向反应本机条件渲染

0 个答案: