移动端与平板端App响应式布局开发需求咨询

要实现手机端垂直堆叠、平板端指定组件并排的响应式布局，你可以利用React Native的useWindowDimensions钩子实时获取屏幕尺寸，动态调整组件布局和样式。下面是修改后的完整代码：

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

const BusinessApp = () => {
  // 获取当前屏幕宽度
  const { width } = useWindowDimensions();
  // 定义平板断点（可根据需求调整，通常768px以上为平板）
  const isTablet = width >= 768;

  return (
    <View style={styles.container}>
      {/* Dashboard View */}
      <View style={styles.section}>
        <Text style={styles.header}>Dashboard View</Text>
        <Text style={styles.content}>Key metrics and performance indicators.</Text>
      </View>

      {/* 平板端将Client和Task并排显示 */}
      <View style={isTablet ? styles.tabletRowContainer : styles.mobileStackContainer}>
        {/* Client Overview View */}
        <View style={[styles.section, isTablet && styles.tabletSection]}>
          <Text style={styles.header}>Client Overview View</Text>
          <Text style={styles.content}>Client accounts, interactions, and status overview.</Text>
        </View>

        {/* Task Management View */}
        <View style={[styles.section, isTablet && styles.tabletSection]}>
          <Text style={styles.header}>Task Management View</Text>
          <Text style={styles.content}>Manage and assign team tasks efficiently.</Text>
        </View>
      </View>

      {/* Financial Summary View */}
      <View style={styles.section}>
        <Text style={styles.header}>Financial Summary View</Text>
        <Text style={styles.content}>Overview of revenue, expenses, and profitability.</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f8f9fa',
  },
  section: {
    marginBottom: 20,
    padding: 15,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  // 平板端行容器：横向排列
  tabletRowContainer: {
    flexDirection: 'row',
    gap: 20, // 两个组件之间的间距
  },
  // 平板端单个section样式：平分宽度
  tabletSection: {
    flex: 1,
    marginBottom: 0, // 去掉底部间距，改用行容器的gap控制间距
  },
  // 手机端堆叠容器：保持默认垂直排列
  mobileStackContainer: {
    // 手机端无需额外样式，默认垂直堆叠
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  content: {
    fontSize: 14,
  },
});

export default BusinessApp;

核心改动说明： #

• 引入useWindowDimensions钩子：实时监听屏幕宽度变化，自动适配窗口调整（比如平板横屏/竖屏切换）
• 定义平板断点：通过width >= 768判断是否为平板设备，可根据实际需求调整阈值
• 动态布局容器：根据isTablet状态切换容器的flexDirection，平板端用row横向排列，手机端保持默认垂直堆叠
• 适配section样式：平板端给两个组件添加flex:1让它们平分宽度，同时去掉底部间距改用gap控制横向间距

扩展优化建议： #

• 可以根据屏幕高度或设备类型（比如通过Platform模块）进一步细化适配逻辑
• 对于更复杂的响应式场景，可封装自定义Hook统一管理断点逻辑
• 测试不同平板尺寸（比如iPad mini、iPad Pro）的显示效果，调整断点和样式参数

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