[react-native] 기본 구현 참고

화면전환

Screen안에 넣은 컴포넌트는 navigate와 route를 프롭스로 받을 수 있다.

Const Stack = createNativeStackNavigator( );
navigation.navigate('Details');

화면 키가 Details인 화면으로 전환.

 <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Details" component={DetailsScreen}/>
    </Stack.Navigator>
</NavigationContainer>

<NavigationContainer/> 에서 내부적으로 safeArea 기능이 들어있다.
<NavigationContainer/> 로 감싸야 네비게이션이 제대로 돌아간다.

Stack.Navigator 인 이유는 Stack처럼 네비게이션이 위로 쌓이고 빠질때도 위에서부터 빠지기 때문이다.

스크린 사이즈 구하기

import { Dimensions } from 'react-native';

const chartHeight = Dimensions.get('window').height;
const chartWidth = Dimensions.get('window').width;

CSS 기본 참고

1. 리액트 네이티브에서는 disflay속성이 기본적으로 flex이며 세로가 기준이다. flex 사용 기본 으로 설정되어 있어 flexDirection:"colum" 으로 설정하지 않아도 세로로 정렬 된다. 가로로 정렬하고 싶으면 부모 스타일에 flexDirection:"row"로 설정하며 기본 스타일 설정이 justifyContents, alignItem 등이 웹 기준 속성으로 돌아간다.

justifyContents : 'center'; //세로 가운데 정렬
justifyContents : 'flex-end'; //세로 끝 정렬
alignItem : 'center'; //가로 가운데 정렬

#축약적용 안됨
paddingLeft : 20
paddingTop : 10
paddingHorizontal : 15 //패딩 가로 적용
paddingVertical : 20 //패딩 세로 적용

2. 리액트 네이티브에서 스타일링 할때 숫자 단위는 dp뿐이다.
3. background 대신 backgroundColor을 사용한다.
4. border대신 borderWidth, borderStyle, borderColor등을 따로 설정해야 한다.

#축약적용 안됨
paddingLeft : 20
paddingTop : 10
paddingHorizontal : 15 //패딩 가로 적용
paddingVertical : 20 //패딩 세로 적용

EVENT

1. onClick 이벤트 대신 onPress 이벤트를 사용 한다.
2. 사용하면 아이폰과 안드로이드 둘다 같은 style로 화면을 구성할 수 있다. 다른 컴포넌트(?)는 운영체제마다 화면이 달라질 수 있다.