React导航屏幕不会从纵向切换到横向

Question

由于侧菜单被弃用，我决定按照Expo的建议将我的应用程序切换到新的react导航。构建一个初始的非常基本的原型来模拟当前的侧菜单，使用一个带有一个嵌套堆栈导航器和四个平面屏幕的抽屉导航器，该应用程序似乎不会从纵向模式旋转到横向模式。不用说，我目前的应用程序是在没有反应导航的情况下开发的，它完全支持所有屏幕上的纵向和横向。

该文档没有提供任何相关细节，也没有提及任何启用/禁用屏幕旋转的设置。我也无法在其他地方找到任何关于预期行为的参考，也无法解释如何启用轮换。

我的package.json文件如下：

{
"name": "pdpappnav",
"version": "0.0.0",
"description": "xxx",
"author": "xxx",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"connect": "^3.6.5",
"expo": "^22.0.0",
"react": "react@16.0.0-beta.5",
"react-native": "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",
"react-native-elements": "^0.17.0",
"react-navigation": "^1.0.0-beta.15",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
}
}

感兴趣的主要代码部分在AppNavigation.js中，如下

import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator, DrawerNavigator, TabNavigator } from 'react-navigation';
import MainScreen from '../Containers/MainScreen';
import SideMenu from '../Components/SideMenu';
import AccountManagement from '../Containers/AccountManagement';
import Settings from '../Containers/Settings';
import DataManager from '../Containers/DataManager';
import ContactUs from '../Containers/ContactUs';
const topStack = StackNavigator({
main: { screen: MainScreen },
})
// drawer stack
const PrimaryNav = DrawerNavigator({
top: { screen: topStack },
account: { screen: AccountManagement },
settings: { screen: Settings },
datamanager: { screen: DataManager },
contact: { screen: ContactUs },
}, {
gesturesEnabled: true,
contentComponent: SideMenu,
headerMode: 'screen',
})
export default PrimaryNav  

我使用自己的组件来渲染Drawer，但切换到默认的contentComponent似乎没有任何区别。

ReduxNavigation.js

import React from 'react'
import * as ReactNavigation from 'react-navigation'
import { connect } from 'react-redux'
import AppNavigation from './AppNavigation'
function ReduxNavigation(props) {
const { dispatch, nav } = props
const navigation = ReactNavigation.addNavigationHelpers({
dispatch,
state: nav
})
return <AppNavigation navigation={navigation} />
}
const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

最后，这里是我的App.js文件

import React from 'react'
import { StyleSheet, View, StatusBar } from 'react-native'
import { Provider } from 'react-redux'
import createStore from './Redux/Reducers'
import ReduxNavigation from './Navigation/ReduxNavigation'
const store = createStore()
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<StatusBar barStyle='light-content' />
<ReduxNavigation />
</View>
</Provider>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
})

提供单独的屏幕没有任何价值，它们只是带有几个按钮的占位符，用于练习原型。

如有任何帮助或澄清，我们将不胜感激。

Answer 1

当你发现这一切都是可以避免的疏忽时，我想这总是令人尴尬的。我完全忘记了Expo控制屏幕方向，你必须明确启用特定的方向选择。当我构建我的原型时，我过于简单化了，忘记了包含世博会的"屏幕定向"指令。

这里是更正的App.js:

import React from 'react'
import { StyleSheet, View, StatusBar } from 'react-native'
import { Provider } from 'react-redux'
import createStore from './Redux/Reducers'
import { ScreenOrientation } from 'expo'; // <==== added this line
const store = createStore()
export default class App extends React.Component {
render() {
ScreenOrientation.allow(ScreenOrientation.Orientation.ALL); // <==== added this line
return (
<Provider store={store}>
<View style={styles.container}>
<StatusBar barStyle='light-content' />
<ReduxNavigation />
</View>
</Provider>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
})

至少我只花了两个小时就找到了答案，希望这能为其他人节省两个小时。。。