在样式组件中，我如何为每个平台和设备提供不同的样式?

Question

我在React native中使用有样式的组件。对于我来说，我使用一个名为DeviceInfo的库来判断这个设备是平板电脑还是手机。

如果设备是平板电脑，则isTablet为真，如果是手机，则为假。

我把isTablet prop赋给了名为NavigateCon的组件，当它为真时赋红色，当它为假时赋橙色。

但是，我想在这里更进一步，当这个设备的操作系统是android和平板电脑时用红色，当android和手机时用橙色，当ios和ipad时用黄色，当ios和手机时用绿色。

我应该如何修复我的代码?我想在一个有样式的组件上尝试一下。

这是我的代码

import { Platform } from "react-native";
import DeviceInfo from 'react-native-device-info';
const NavigateCon = styled.TouchableOpacity<Device>`
background-color: ${props => (props.tablet ? 'red' : 'orange')};
`;
interface Device {
tablet: boolean;
}

const Main = () => {
const isTablet = DeviceInfo.isTablet();
return (
<NavigateCon tablet={isTablet}>
</NavigateCon>
)

Answer 1

你可以试试这个

import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';
const NavigateCon =
styled.TouchableOpacity <
Device >
`
background-color: ${(props) =>
props.os === 'android'
? (props.tablet
? 'red'
: 'orange') :
(props.iPad ?
'yellow'
: 'green')};
`;
interface Device {
tablet: boolean;
os: String;
}
const Main = () => {
const isTablet = DeviceInfo.isTablet();
const os = Platform.OS;
const isPad = os === 'ios' ? Platform.isPad : false;
return <NavigateCon tablet={isTablet} os={os} iPad={isPad}></NavigateCon>;
};