使用React Native在锁定竖屏的Android应用程序中实现方向感知模态窗口

Question

我正在开发一个React Native应用程序，由于应用程序的性质，通常只能使用纵向模式。在AndroidManifest.xml文件中使用以下标志将应用程序锁定为纵向模式：

android:screenOrientation="portrait"

现在我希望应用程序能够在应用程序的某个特定位置旋转。在React Native中，Modal组件似乎是正确的选择。Modal的配置如下：

<Modal
    animationType="slide"
    transparent={false}
    supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}  
>
    <View style={styles.modal}>
        <View>
            <TouchableHighlight onPress={() => {
                this.setState({
                    awareVisible: false
                });
            }}>
            <Text>Hide Modal</Text>
            </TouchableHighlight>
        </View>
    </View>
</Modal>

在iOS中，这个功能很好用，视图会旋转；但在Android上没有任何反应。我尝试创建了一个自定义的Modal组件，并在Android代码中捕获它，但对我来说也没有起作用。

- Sammekl

---

嗨，模态组件中的supportedOrientations仅适用于iOS。 - Sathish Sundharam

@SathishSundharam 我知道，但根据 Modal 文档，它在 Android 上工作时不需要额外的属性。 - Sammekl

Answer 1

您可以使用 react-native-orientation 来完成这个操作……由于该项目似乎已经不再维护了，因此最好使用这个 fork 版本：react-native-orientation-locker。

通过它，每当您需要时，只需设置类似于以下内容即可：

Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations
Orientation.lockToPortrait(); //this will lock the view to Portrait
Orientation.lockToLandscapeLeft(); //this will lock the view to Landscape

我也在我的一款App中使用它，这个App只能强制竖屏。但是我需要横屏查看图库中的图片。 在Android和IOS上都运行得非常好。

希望这能帮助到你。

- suther