[RN] React Navigation Docs(3) - navigationOptions

React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator

Sharing common navigationOptions across screens

createStackNavigator 로 stackNavigator 를 생성할 때, 다음과 같이 2번째 인자로 defaultNavigationOptions 를 설정할 수 있습니다. 이는 해당 stackNavigator 에 있는 모든 routes 에 디폴트 옵션으로 적용됩니다.

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    /* No more header config here! */
  };
 
  /* render function, etc */
}
 
/* other code... */
 
const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

headerStyle: 헤더를 감싼 뷰에 적용되는 스타일 객체입니다. backgroundColor를 설정하면 헤더의 색상이 됩니다.

headerTintColor: 뒤로 버튼과 제목 모두 이 속성을 색상으로 사용합니다. 위의 예에서는 뒤로 버튼과 헤더 제목이 흰색이 되도록 틴트 색상을 흰색(#fff)으로 설정합니다.
HeaderTitleStyle: 제목의 fontFamily, fontWeight 및 기타 텍스트 스타일 특성을 지정할 수 있습니다.

Overrinding shared navigationOptions

디폴트로 정의됐던 navigationOptions 을 다음과 같이 overriding 할 수도 있습니다.

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
 
    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  };
 
  /* render function, etc */
}

Replacing the title with a custom component

제목에 텍스트 말고 이미지를 삽입할 수도 있습니다.

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}
 
class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };
 
  /* render function, etc */
}

Header 차이점 - Android, Ios

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator