💻[React Native] React Navigation, Scroll

React Native Navigation : 외국 개발에서 많이 쓰임

✔️ React Navigation

필수 설치 npm install @react-navigation/native
expo인 경우: npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack : 새로운 뷰가 쌓이도록 올라오는 네비게이션

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   <Text>Home Screen</Text>
 </View>
);
}

const Stack = createNativeStackNavigator();

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

export default App;

<NavigationContainer>: 앱에서 보통 하나만 사용, 다 감싸는 형태
<Navigator>: 여러 개가 만들어질 수 있음, 여러 개가 모여서 하나의 앱을 만듦
(용도 별로 나뉘어서) 안에는 여러 개의 <Screen>
<Stack>에는 name과 component가 들어감
각 component는 props로 props->props.navigation 또는 {navigation}을 받음: 현재 페이지에 대한 정보 + 내가 앞으로 할 수 있는 행동들도 들어오게 됨

function Hone({navigation}) {
  return (
    <>
      <Button
        title="로또 번호 생성기"
        onPress={() => {
          navigation.navigate('LottoGenerator');
        }}
      />
    </>
  );
}

`' ios: 좌우, 안드로이드: 상하로 쌓여 있는 것, 원래 화면이 뒤로 가고 위에 쌓이는 것
기본값: header(뒤로 가는 버튼)

✔️ Scroll

기본 View는 scroll이 되지 않음

ScrollView: List Component가 아닌 경우: <ScrollView>

FlatList: List component가 overflow되는 것을 지원: dataset을 화면에 뿌리는 형태

 <FlatList
       data={DATA} //어떤 데이터?
       renderItem={renderItem} //어떤 형테로 그릴 것인지에 대한 함수
       keyExtractor={item => item.id} //item의 key를 어떤 것으로 쓸 지
     /> 

dataset에는 항상 key가 필요!! > 어떤 것인지 구분할 수 있도록

const screenList = [
 {key:1, title: "로또 번호 생성기", link: "LottoGenerator"},
 {key:2, title: "자연풍경시계", link: "WatchFace"},
]

function Home({navigation}) {
   function renderItem({item}){
 		return <Button title={props.item.title} 
		onPress={()=>{navigation.navigate(item.link);
   }}/>
} //함수 안에 함수-> rendering이 화면이 바뀔 때마다 안의 함수도 같이 됨
 return (
   <>
     <FlatList data={screenList} renderItem={renderItem}/>
   </>
 );
}

🔧 useCallback(): 주시하는 대상이 변경될 때만 선언!

react에서 useCallback()을 선언해옴(useState 처럼)

const screenList = [
  {key:1, title: "로또 번호 생성기", link: "LottoGenerator"},
  {key:2, title: "자연풍경시계", link: "WatchFace"},
]

function Home({navigation}) {
    const renderItem = useCallback(({item}) => {
  		return <Button title={item.title} 
    	onPress={() =>{navigation.navigate(item.link);
    }}/>
}, [] );
  return (
    <>
      <FlatList data={screenList} 
              	renderItem={renderItem}
              	keyExtractor={item => item.key}/>
    </>
  );
}

🔧 Pressable: 어떤 요소든지 클릭을 할 수 있도록 만들어 줌

이미지, 본문 안의 텍스트 등, 버튼 UI-> 스타일로 지정된 UI
ios, 안드로이드가 같도록 고유의 UI 디자인을 지정한 버튼을 만들 때 사용

const LinkItem = styled.View`
padding: 8px 12px;
border-bottom: 1px solid #e5e5e5;
`;

function Home({navigation}) {
    const renderItem = useCallback(({item}) => {
    return (
      <Pressable onPress={() => navigation.navigate(item.link)}>
      <LinkItem>
      <Text>{item.title}</Text>
      </LinkItem>
      </Pressable>
    )
}, [] );