React Native中iOS大小屏幕特定风格代码的正确方法

Question

有没有一种简单的方法可以为小尺寸的ios设备和React Native中的大尺寸设备制作不同的风格(比如更小和更大的按钮等(？就像这里(https://reactnative.dev/docs/platform-specific-code#platform-特定的扩展(，当我在React Native中为特定平台iOS和Android需要不同的风格时？

感谢

Answer 1

所有内容都在您的链接中进行了解释。

两种解决方案：

1. 处理平台的一个组件

:

import { Platform } from 'react-native';
...
<Button style={Platform.OS === 'ios' ? styles.iosButton: styles.androidButton} />

2. 每个平台有两个组件

:

BigButton.ios.js
BigButton.android.js
...
import BigButton from './BigButton';

这样导入将根据平台加载正确的组件

要根据屏幕大小进行调整，可以使用尺寸

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
<View style={windowWidth > 1200 ? styles.big_screen : styles.small_screen}>
...
</View>