React native，样式不适用于组件

Question

I am using the platform api to apply a style for ios or android. However, no styles are appearing for containerAndroid , or containerIos , any ideas?

  import { View, Pressable, Platform } from 'react-native';
  import getStyleObj from './styles';

  const style = useMemo(() => getStyleObj({ backgroundColor, secondSnapshot }),
        [backgroundColor, secondSnapshot]);


  // apply style depending on platform
  <Animated.View
                style={[
                    style.container,
                    actionSheetStyle,
                    Platform.OS === 'android'
                        ? style.containerAndroid
                        : style.containerIos,
                ]}
            >
                <Icon
                    name="minus"
                    size={50}
                    color={colors.GREYONE}
                    style={style.toggleIcon}
                />
                {renderHeader}

style.js:

const { StyleSheet } = require('react-native');

const getStyleObj = ({ backgroundColor, secondSnapshot }) => {

  return StyleSheet.create({
    container: {
      position: 'absolute',
      backgroundColor: backgroundColor || 'white',
      width: '100%',
      height: secondSnapshot,
      bottom: 0,
    },
    containerIos: {
      borderTopEndRadius: 15,
      borderTopStartRadius: 15,
      shadowColor: '#000',
      shadowOffset: { width: 1, height: -6 },
      shadowOpacity: 0.1,
      shadowRadius: 2,
    },
    containerAndroid: {
      borderTopColor: '#c4c4c4',
      borderTopWidth: 0.3,
    },
    toggleIcon: {
      alignSelf: 'center',
    },
  });
};

export default getStyleObj;

Answer 1

You can try the below things for your goal.

import { Platform, StyleSheet } from 'react-native';


 <Animated.View
            style={[
                style.container,
                actionSheetStyle,
                style.platformContainer
            ]}
        >

const styles = StyleSheet.create({
  platformContainer: {

    ...Platform.select({
      ios: {
           borderTopEndRadius: 15,
           borderTopStartRadius: 15,
           shadowColor: '#000',
           shadowOffset: { width: 1, height: -6 },
           shadowOpacity: 0.1,
           shadowRadius: 2,
         },
      android: {
          borderTopColor: '#c4c4c4',
          borderTopWidth: 0.3,
       },
      default: {
         // other platforms, web for example
          backgroundColor: 'blue'
       }
     })
   }
});