(사치)

기본 색상 바꾸기

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

• Navigator에 두면 아래 Screen에 공통 적용 된다. (Screen에 두면 개별 적용이겠지?)

Text대신 로고 넣을려면!

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>
  );
}

• headerTitle이 Stack.Screen의 디폴트 변수명이다

• headerLeft, headerRight도 옵션으로 넣을 수 있다.

• options을 통하면 header와 screen과 상호작용할 수 없다.

  ⇒ options을 통하지않고 해당 컴포넌트에서 작업하려면 navigation.setOptions

React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

더 커스텀화하고 싶다?! https://reactnavigation.org/docs/header-buttons