反应导航屏幕不会从纵向切换为横向

Question

Due to the deprecation of the Side Menu, I decided to switch my app to the new react-navigation as suggested by Expo. Building an initial very basic prototype to emulate the current side menu, using a drawer navigator with one nested stack navigator and four plain screens, it appears that the app does not rotate from Portrait to Landscape mode. Needless to say, my current app, as developed without react-navigation, cleanly supports both portrait and landscape across all screens.

The documentation does not provide any relevant detail nor mentions any settings that would enable/disable screen rotation. I also was unable to find any reference elsewhere as to the expected behavior or explaining how to enable rotation.

My package.json file is as follows:

{
  "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"
  }
}

The main code portion of interest is in AppNavigation.js as follows

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  

I am using my own component to render the Drawer, but switching to the default contentComponent does not seem to make any difference.

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)

Finally, here my App.js file

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'
  },
})

There is no value providing the individual screens, they are simply placeholders with a few buttons to exercise the prototype.

Any help or clarification would be greatly appreciated.

Answer 1

I guess it is always embarrassing when you figure out that it all was an avoidable oversight. I had totally forgotten that Expo controls screen orientation and you have to explicitly enable specific orientation choices. When I built my prototype, I oversimplified and forgot to include the Expo 'ScreenOrientation' directive.

Here the corrected 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'
  },
})

At least it only took me two hours to find the answer, hopefully this will save someone else two hours ...