[RN] 기본 레이아웃 구성하기

1. SafeAreaView

• 화면의 안전한 영역 내에서 콘텐츠를 렌더링하는 데 사용된다.
• 안전한 영역(Safe Area)은 기기의 물리적인 특징(예: 노치, 홈 인디케이터) 때문에 콘텐츠가 가려지지 않도록 보장할 수 있다.
• 예를들어 최신 Ipone 모델의 상단 노치 또는 하단의 홈 인디케이터를 피해서 콘텐츠를 배치하고 싶을 때 SafeAreaView 를 사용하면 안전한 영역 내에 콘텐츠가 위치하게 되는 것이다.

.

단순히 View로만 코드를 감쌌을 때

import React from 'react';
import {View, Text, Button} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const WelcomeScreen: React.FC = () => {
  return (
    
      <View >
        <Text>온보딩화면</Text>
        <Text>이미 회원이신가요?</Text>
        <Button
          title="로그인하기"
        />
        <Button
          title="시작하기"
        />
      </View>
   
  );
};

export default WelcomeScreen;

 

 

이렇게 시뮬레이터의 크기를 무시하고 삐쭉 올라가버린 것을 확인할 수 있다 -_ - 

 

SafeAreaView 를 통해 안전한 영역 내에서 콘텐츠 렌더링

import React from 'react';
import {View, Text, Button,SafeAreaView} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const WelcomeScreen: React.FC = () => {
  return (
    <SafeAreaView>
      <View >
        <Text>온보딩화면</Text>
        <Text>이미 회원이신가요?</Text>
        <Button
          title="로그인하기"
        />
        <Button
          title="시작하기"
        />
      </View>
    </SafeAreaView>
  );
};


export default WelcomeScreen;

 

 

우왕 안전한 영역 내로 들어왔다! 더이상 ios 의 상단을 괴롭히지 않는 것을 확인할 수 있다.

 

2. FlatList

스크롤이 필요한 많은 양의 데이터를 보여줄 때 유용

https://khw063011.tistory.com/67

[RN] FlatList 알아보기

 

-> FlatList 에 대해서는 여기에 정리해두었으니 참고하시랏 !

 

3. ScrollView

• 화면에 표시할 수 있는 공간을 초과하는 콘텐츠를 스크롤할 수 있게 해준다.
• 사용자는 스크롤동작을 통해 나머지 부분을 볼 수 있다. 
• 기본동작은 세로 스크롤이지만 따로 지정하여 가로 스크롤이 가능하게끔 해줄 수 있다. 

import { View,Text,ScrollView, SafeAreaView} from 'react-native';

const App =() => {
  return (
    <SafeAreaView>

      <ScrollView>
      <View>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
        <Text>4</Text>
        <Text>하이롱</Text>
        <Text>메롱</Text>
        <Text>히히</Text>
        
        ///생략...///
      </View>
    </ScrollView>
  </SafeAreaView>

  )
};


export default App;

 

이런 코드가 있다고 가정해보자

 

지정해둔 Text 가 안보이지만~ 스크롤하면

 

이렇게 보인다 ~^^

 

4. Navigation 구성하기

• 어플의 내비게이션 트리를 설정한다.
• 페이지별 경로를 설정할 수 있다. 

https://khw063011.tistory.com/44

[RN] Navigation 사용하기

 

여기에 잘 정리해두었담 ~^^

<NavigationContainer> 이 기본 틀을 잡고

     <Stack.Navigator> -> 로 어떻게 동작을 할건지~( 새로운 화면으로 이동할 때마다 화면을 추가하게끔 스택 쌓음) 

         <Stack.Screen> 어떤 화면이 보일건징?

 

//navigator 예시

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

예시코드를 보아랏!

container 로 가장 크게 감싸주고, 

navigator 로 초기화면 옵션을 설정해주고

screen 으로 보여질 화면 스택들을 쌓아주었담! !