时间戳

首页 > 解决方案 > Correct approach to specific style code for small and big iOS screen in React Native?

ios - Correct approach to specific style code for small and big iOS screen in React Native?

问题描述

Is there an easy way to make a different style (like smaller and bigger buttons etc. ) for small size ios devices and the big ones in React Native? Like here (https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions) when I need different styles for a specific platform iOS and Android in React Native?

Thanks

标签： iosreact-nativestyles

解决方案

All is explained in your link.

Two solutions:

  1. One component where you handle the platform

:

import { Platform } from 'react-native';

...

<Button style={Platform.OS === 'ios' ? styles.iosButton: styles.androidButton} />
  1. Two components for each platforms

:

BigButton.ios.js
BigButton.android.js

...

import BigButton from './BigButton';

Importing like this will load the correct component depending of the platform

To adjust depending of the screen size you can use Dimensions

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;

<View style={windowWidth > 1200 ? styles.big_screen : styles.small_screen}>
    ...
</View>

推荐阅读