View에서 사용하는 모든 핵심 컴포넌트들이 플랫폼에 따라 다르게 네이티브 컴포넌트로 컴파일이 되게 됩니다. Andorid와 ios의 네이티브 언어는 다르며 각각 다른 스타일 프로퍼티를 지원하게 됩니다.

그림자(BoxShadow)

웹에서는 boxShadow라는 css 프로퍼티를 추가하게 되지만, React-Native에는 해당 프로퍼티가 없습니다. 대신 ios, aos에 따라 각각 방법이 지원되고 있습니다.

aos

• elevation : 0,1,2,3~ 등의 값을 제공합니다. 레벨이 높아질 수록 그림자가 진하게 표시가 됩니다.

ios

• shadowColor: 그림자 색상 지정
• shadowOffset
  • 그림자를 만드는 객체로부터 그림자가 왼쪽과 오른쪽으로부터 어느정도 늘어지는지를 정의
  • shadowOffset: { width: 0, height: 2 }
• shadowOpacity
  • 그림자가 얼마나 번지는지를 지정
• shadowRadius
  • 그림자의 투명도를 지정

import React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
import PrimaryButton from '../components/PrimaryButton';

const styles = StyleSheet.create({
  inputContainer: {
    marginHorizontal: 24,
    marginTop: 100,
    padding: 16,
    backgroundColor: '#72063c',
    borderRadius: 8,
    elevation: 4,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.25,
  },
});

function StartGameScreens() {
  return (
    <View style={styles.inputContainer}>
      <TextInput />
      <PrimaryButton>Reset</PrimaryButton>
      <PrimaryButton>Confirm</PrimaryButton>
    </View>
  );
}

export default StartGameScreens;