如何在React Native的styled-components中按平台与设备设置不同样式？

解决方案 #

你可以结合Platform和传入的tablet属性，在styled-components的样式逻辑里直接区分四种设备场景，无需额外修改组件传参。以下是完整修改后的代码：

import { Platform } from "react-native";
import DeviceInfo from 'react-native-device-info';
import styled from 'styled-components/native';

const NavigateCon = styled.TouchableOpacity<Device>`
  background-color: ${props => {
    // 处理Android设备
    if (Platform.OS === 'android') {
      return props.tablet ? 'red' : 'orange';
    }
    // 处理iOS设备
    else if (Platform.OS === 'ios') {
      return props.tablet ? 'yellow' : 'green';
    }
    // 其他平台默认 fallback 颜色
    return 'orange';
  }};
`;

interface Device {
  tablet: boolean;
}

const Main = () => {
  const isTablet = DeviceInfo.isTablet();
  return (
    <NavigateCon tablet={isTablet}>
      {/* 组件内容 */}
    </NavigateCon>
  )
}

逻辑说明 #

• 通过Platform.OS判断当前设备所属系统（Android/iOS）
• 结合DeviceInfo.isTablet()返回的tablet属性，分别匹配四种场景的背景色：
  • Android平板 → 红色
  • Android手机 → 橙色
  • iOS平板（iPad）→ 黄色
  • iOS手机 → 绿色
• 补充默认fallback颜色，避免非Android/iOS平台出现样式异常

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