我用过 TabNavigation
对于我的应用程序。在某些屏幕上,我希望它只显示在 portrait
上方向,其他是landscape
.我找到了 react-native-orientation
并在我的屏幕上尝试:
屏幕 1
import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'
export default Screen1 extends React.PureComponent{
componentDidMount(){
Orientation.lockToLandscape();
}
componentWillUnmount(){
Orientation.unlockAllOrientations();
}
render() {
return(<Text>Screen 1</Text>);
}
}
屏幕 2
import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'
export default Screen2 extends React.PureComponent{
componentDidMount(){
Orientation.lockToPortrait();
}
componentWillUnmount(){
Orientation.unlockAllOrientations();
}
render() {
return(<Text>Screen 2</Text>);
}
}
标签导航器
const AppNavigator = TabNavigator( {
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
});
但它总是纵向的,这意味着它的方向总是基于我在
TabNavigator
中添加的最后一个屏幕的方向设置。 .任何帮助表示赞赏,在此先感谢您!编辑 1
我试过
StackNavigation
相反,它起作用了。仍然不知道为什么它不与 TabNavigation
一起运行.
最佳答案
好久没问这个问题了,react-navigation
是升级到版本 3。我对这个问题的解决方案是在每次按下时设置选项卡的方向,导致当您单击其他选项卡时不会卸载选项卡屏幕。要解决此问题,您可以添加 tabBarOnPress
给您的 navigationOptions
你的屏幕像这样
import Orientation from 'react-native-orientation';
...
class TabbarScreen1 extends Component {
static navigationOptions = {
...,
tabBarOnPress: ({ defaultHandler }) => {
// Orientation.lockToLandscape();
Orientation.lockToPortrait();
defaultHandler();
},
}
...
}
关于react-native - 如何在 TabNavigator 上锁定特定屏幕的方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48622139/