我有一个使用两个视图的Stack Navigation在iOS和Android上运行的React Native Expo应用程序。第一个视图被锁定为纵向屏幕方向
export class HomeScreen extends Component {
componentWillMount() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
}
render() {...
}
}
第二个视图应同时在纵向和横向屏幕上可用:
export class DetailScreen extends Component {
componentDidMount() {
ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN
);
}
async componentWillUnmount() {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
);
}
render() {...
}
}
这几乎可以正常工作,但是我有两个问题:
DetailScreen
)处于横向并且按下返回按钮时,在旋转回到纵向之前,将以横向显示短暂显示第一个视图(HomeScreen)。是否可以确保在返回之前将设备旋转到纵向?我尝试在async await
内部的componentWillUnmount
方法中使用DetailScreen
来执行此操作,但是在卸载组件时,屏幕仍然处于横向。HomeScreen
。但是,当DetailScreen
以横向显示时,请执行此手势,同时HomeScreen
也以横向显示。我该如何处理?在横向时是否可以通过某种方式在DetailScreen
内禁用此手势?此Expo Snack中提供了示例: https://snack.expo.io/HJ_nhkQKH
答案 0 :(得分:3)
我为您的问题更新了博览会小吃: https://snack.expo.io/BJfXseXYB
第1部分。使用NavigationEvents-onWillFocus
第2部分:
const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
gesturesEnabled: true,
},
},
DetailView: {
screen: DetailScreen,
navigationOptions: {
gesturesEnabled: false,
},
},
},
{
initialRouteName: 'Home',
}
);