TIL - React Navigation (공식문서 참고 공부 진행 중)

리액트 네비게이션 설치와 사용방법에 대해 알아보자. 공식문서와 책을 참고했다.
아래 번호 순서는 공식문서 getting started 순서대로 작성하였다. 나중에 좀 더 익숙해지면 하나하나 다시 정리해나갈 생각이다.

우선 Fundamentals 내용 전부와 Guidesd의 Tab navigation까지가 1차 목표
그리고 책 꾸준히 해나가기

공식문서
https://reactnavigation.org/docs/getting-started

getting started

1. 프로젝트 생성

npx react-native init LearnReactNative

2. react navigation 설치

yarn add @react-navigation/native

3. react navigation이 의존하는 의존 라이브러리 설치
   (공식문서에 의하면 라이브러리를 설치할 때 경고가 나올 수 있는데 내 앱이 빌드 되는한 무시해도 된다고 써있다.)

yarn add react-native-screens react-native-safe-area-context

4. React Native 0.6 부터 liniking이 자동으로 설치된다. 때문에 react-native link를 설치할 필요없다. 단 Mac유저이고 ios환경에서 개발을 위해 pods를 설치해야한다.

npx pod-install ios

또는

cd ios
pod install

5. 안드로이드 디바이스에서 잘 작동시키기 위해 의존성 라이브러리로 설치한 react-native-screens에서 한가지 더 설정할 것이있다. MainActivity.java. 파일에 찾아가 MainActivity class body부분에 코드를 추가해줘야한다.
   이 부분을 설정하는 이유는 공식문서에서는 아래로 설명한다.
   This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.

경로
android/app/src/main/java/<your package name>/MainActivity.java.

추가할 코드

import android.os.Bundle;  // 최상단에 

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

6. 네비게이션을 사용하기위해 NavigationContainer를 app.js나 index.js에 설정해줘야한다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

7. 웹 브라우저 처럼 history를 사용하기 위해 stack navigator 라이브러리를 설치하자.

yarn add @react-navigation/native-stack

8. createNativeStackNavigator사용
   createNativeStackNavigator 함수를 사용하면 Screen과 Navigator를 키로 갖고 있는 객체를 반환한다. 이 2개로 네비게이터를 구성하는 것이다. Navigator로 Screen을 감싸 구성한다.
   스택 네비게이터 공식문서 이트
   https://reactnavigation.org/docs/native-stack-navigator/

// 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;

9. Stack.Screen은 name, component, options를 props로 사용한다. 전체 옵션을 주고싶다면 Navigator에 screenOptions를 사용한다. options={{title:'OverView'}} 이런식으로 설정하면 스크린 헤더의 네임을 변경할 수 있다. 위에 2개의 props가 어디에 쓰는지 좀 더 공부 필요

10. stack.screen의 사용된 컴포넌트들은 navigation props를 받을 수 있다.
    navigation 공식문서
    https://reactnavigation.org/docs/navigation-prop/

11. navigation.navigate('detail')에 들어간 상태에서 다시한번 detail로 들어가면 아무일도 일어나지 않는다. 하지만 navigation.push를 사용하면 추가적인 화면이 계속 생긴다.

12. StackNavigator에 의해 생긴 헤더는 go.back키를 가지고있다. 스택이 사라지면 자동으로 없어진다.

13. navigate의 두번째 인자로 데이터를 넘겨줄 수 있다. 해당 컴포넌트에서 route.params로 받을 수 있으며 받은 데이터를 꼭 JSON.stringify를 해준 뒤 사용하는것을 추천한다. 그 이유는 아래 참고.

state persistence - https://reactnavigation.org/docs/state-persistence

deep linking -
https://reactnavigation.org/docs/deep-linking

We recommend that the params you pass are 
JSON-serializable. 
That way, you'll be able to use state persistence 
and your screen components will have the right contract 
for implementing deep linking.

14. navigation.setParams를 통해 Params를 수정할 수 있다.
    setParams로 screen option title 같은거 바꾸면 안된다. 바꾸려면 setOptions를 사용하자.
    공식문서 참고
    https://reactnavigation.org/docs/navigation-prop#setparams

15. Stack.Screen에 initial params를 설정할 수 있다.
    약간 리액트 defaultProps같은 느낌이다.

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

16. navigate, goback을 사용하여 뒤로 데이터를 전달 할 수도 있다. 공식문서 Passing parameters to routes에서 다시 보자.

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          
          // 뒤로 전달할때는 네비게이터에 이렇게 전달하는게 핵심인듯 하다.
          
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

17. 중첩 된 네비게이터에 데이터 전달하기
    https://reactnavigation.org/docs/nesting-navigators

18. params를 데이터 전송용으로 쓰지말자. 아래에 적어놓은 사용예시 참고하고 공식문서도 보자.

얘도 여기서 찾아서보자
https://reactnavigation.org/docs/params

// Don't do this 이렇게 사용 노노 
navigation.navigate('Profile', {
  user: {
    id: 'jane',
    firstName: 'Jane',
    lastName: 'Done',
    age: 25,
  },
});

// Some examples of what should be in params are: 사용예시

1.Ds like user id, item id etc., e.g. 
navigation.navigate('Profile', { userId: 'Jane' })

2. Params for sorting, filtering data etc. 
when you have a list of items, e.g.
navigation.navigate('Feeds', { sortBy: 'latest' })

3. Timestamps, page numbers or cursors for pagination, e.g. 
navigation.navigate('Chat', { beforeTime: 1603897152675 })

4. Data to fill inputs on a screen to compose something, e.g.
navigation.navigate('ComposeTweet', { title: 'Hello world!' })

19. Using params in th title (얘 이해못햇음)
    https://reactnavigation.org/docs/headers

20. navigation.setOptions로 설정된 options의 title을 변경할 수 잇다.

21. options에 headerStyle등으로 스타일 변경가능

21. Stack.Navigator의 screenOptions속성으로 전체헤더 스타일 변경가능하다. 만약 이미지같은걸 넣고싶을때는? 아래코드 참고

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

22. 헤더에 버튼 만들기, back 버튼 커스텀하기, 오버라이딩 하기
    https://reactnavigation.org/docs/header-buttons

네이스팅 부터 다시봐야함 to be continue