反应导航屏幕不会从肖像切换到风景

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

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

我的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": "[email protected]", 
    "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' 
    }, 
})

有没有提供单独的屏幕价值，他们只是有几个按钮行使原型占位符。

任何帮助或澄清将不胜感激。

来源

2017-10-29 HJ Sievert

我猜想，当你发现这一切都是可以避免的疏忽时，总是很尴尬。我完全忘记了世博会控制屏幕的方向，你必须明确地启用特定的方向选择。当我建立我的原型时，我过于简单化，忘记了包含世博会的“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' 
    }, 
})

至少只花了两个小时来找到答案，希望这将节省别人2小时...

来源

2017-10-29 04:01:37

反应导航屏幕不会从肖像切换到风景

回答

相关问题