如何让Expo应用在安卓平板上渲染类Bolt/Uber的移动端视图？

要让Expo应用在安卓平板上呈现和手机一致的移动端视图（居中显示、不拉伸、保留手机布局），可以通过以下几种方式实现：

1. 配置App限制最小显示宽度 #

通过app.json设置安卓应用的最小宽度参数，强制应用以手机尺寸为基准渲染，在平板上居中显示：

{
  "expo": {
    "android": {
      "config": {
        "android": {
          "resizeableActivity": false, // 禁止系统自动拉伸应用
          "smallestWidthDp": 360 // 设置为手机常见最小宽度（比如360dp）
        }
      }
    }
  }
}

• resizeableActivity: false：阻止系统根据平板屏幕尺寸自动调整应用布局
• smallestWidthDp: 360：定义应用的最小适配宽度，平板会以此宽度渲染应用，剩余屏幕空间留空

2. 锁定屏幕方向（可选） #

如果需要固定竖屏（和手机体验一致），可以在app.json中全局设置：

{
  "expo": {
    "orientation": "portrait"
  }
}

或者通过Expo的ScreenOrientation API动态控制：

import * as ScreenOrientation from 'expo-screen-orientation';
import { useEffect } from 'react';

// 在组件挂载时锁定竖屏
useEffect(() => {
  const lockOrientation = async () => {
    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
  };
  lockOrientation();
  return () => ScreenOrientation.unlockAsync();
}, []);

3. 使用固定宽度的布局容器 #

通过自定义容器组件，限制内容最大宽度，确保平板上内容不拉伸，保持手机端布局：

import { View, StyleSheet } from 'react-native';

export default function MobileContainer({ children }) {
  return (
    <View style={styles.container}>
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    maxWidth: 480, // 手机端常见最大宽度
    marginHorizontal: 'auto', // 水平居中
    backgroundColor: '#ffffff', // 和平板背景区分开
  },
});

将所有页面内容嵌套在这个容器中，即可在平板上实现居中的移动端视图效果。

4. 调整AndroidManifest配置（进阶） #

如果需要更精细的控制，可以通过app.json的extraManifestFields添加安卓Manifest配置：

{
  "expo": {
    "android": {
      "extraManifestFields": {
        "application": {
          "android:resizeableActivity": "false",
          "android:supportsLargeScreens": "true",
          "meta-data": [
            {
              "android:name": "android.max_aspect",
              "android:value": "2.1" // 限制应用最大宽高比，适配全面屏手机同时兼容平板
            }
          ]
        }
      }
    }
  }
}

以上方法结合使用，就能实现类似Bolt或Uber的平板适配效果——应用以手机尺寸居中显示，保留完整的移动端交互和布局。

内容的提问来源于stack exchange，提问作者Peter Taiwo