[react-navigation]2

navigationOptions

• 네비게이션 바의 타이틀이나 색상을 변경한다.
• 네비게이션은 static 정적 데이터나 함수를 사용가능하고
• 함수의 경우 리턴값으로 {navigation, navigationOptions} 를 전달한다.

정적 데이터

// 클래스 형태라면 내부에
class HomeScreen extends React.Component { 
  static navigationOptions = {
    title: 'Details',
    navigationOptions: {
    }
  }
...
}
// 함수 형태라면
const HomeScreen = () => { ... }
HomeScreen.navigationOptions = {
  title: 'Details'
}

함수

// 클래스 형태라면 내부에
class HomeScreen extends React.Component { 
  static navigationOptions = ({navigation, navigationOptions, screenProps}) => {
    const { params } = navigation.state;
    return {
      title: 'Details',
      title: navigation.getParam('type') // 함수를 사용해서 가져올수도 있음
    }
}
// 함수 형태라면
const HomeScreen = () => { ... }
HomeScreen.navigationOptions = ({navigation, navigationOptions}) => {
  const { params } = navigation.state;
  return{
    title: 'Details'
  }
}

타이틀 스타일

class HomeScreen extends React.Component { 
static navigationOptions = {
    title: 'Detail',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
...

// 전체에 default style 가능
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

커스텀 컴포넌트를 제목에 사용

const LogoTitle = () => {
  return (
    <View style={{ flex: 1, height: 30 }}>
      <Text>Logo</Text>
    </View>
  );
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: () => <LogoTitle />,
  };

  /* render function, etc */
}