Question

由于侧面菜单的弃用，我决定按照Expo的建议将我的应用切换到新的反应导航。构建一个初始的非常基本的原型来模拟当前的侧面菜单，使用带有一个嵌套堆栈导航器和四个普通屏幕的抽屉导航器，看起来该应用程序不会从纵向模式旋转到横向模式。毋庸置疑，我目前的应用程序，在没有反应导航的情况下开发，可以在所有屏幕上清晰地支持纵向和横向。

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

我的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

我使用自己的组件渲染抽屉，但切换到默认的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控制屏幕方向，您必须明确启用特定的方向选择。当我构建我的原型时，我过度简化并忘记包含Expo'ScreenOrientation'指令。

这里更正了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'
  },
})

至少我花了两个小时才找到答案，希望这可以节省两个小时的其他人......

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

1 个答案: