如何解决根据方向反应本机条件渲染
我目前正在开始学习功能组件。 我尝试使用一个既允许纵向又可以横向的屏幕,而该应用程序的其余部分仅允许纵向。
我的方法是使用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;
不幸的是,此组件始终为空。我在这里做错了什么
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com(将#修改为@)