[23.06.25]TIL

Stack.Navigator screenOptions={{
            headerStyle: { backgroundColor: "#351401" },
            headerTintColor: "white",
            contentStyle: { backgroundColor: "#3f2f25" },
          }}

screenOptions로 전체 스택 화면 스타일 옵션을 줄 수 있다.

<Stack.Screen
            name="MealsCategories"
            component={CategoriesScreen}
            options={{
              title: "All Categories",
              headerStyle: { backgroundColor: "#351401" },
              headerTintColor: "white",
              contentStyle: { backgroundColor: "#3f2f25" },
            }}
          />

개별 화면에 스타일 적용하려면 Stack.Screen options에서 속성주면 됨.

화면을 구성하고 싶은데로 코드 작성하면 됨.

Stack.Screen options={() => {}}처럼 함수를 줄 수도 있음.

useLayoutEffect는 애니메이션이 실행되는 동안 부수 효과를 설정하거나 실행할 때 사용할 수 있음.
effect 함수를 컴포넌트 함수 실행과 동시에 실행하는 것임.

각각에 스크롤 기능을 부여할 수도 있지만 전체 페이지 스크롤이 대체로 적절함.

Stack.Screen options를 통해 headerRight속성을 줄 경우 헤더 오른쪽 부분에 커스터마이징할 수 있음.
직접 연결이 필요하면 화면 컴포넌트에서 코딩해야함.
useLayoutEffect와 setOptions메서드를 사용해 옵션을 설정함.