탐색 헤드 구성

헤드 헤더 설정

화면 구성 요소는 정적 속성 navigationOptions 을 가지고 있으며, 하나의 대상이나 하나의 대상을 되돌려주는 함수를 가지고 있으며, 이 대상은 각종 설정 옵션을 포함한다.머리글 제목을 사용하는 옵션은 다음과 같이 title라고 합니다.

//  
class HomeScreen extends React.Component {
  //  ，  navigationOptions
  static navigationOptions = {
    title: 'Home', //  
  };

  /*   render   */
}

//  
class DetailsScreen extends React.Component {
  //  ，  navigationOptions
  static navigationOptions = {
    title: 'Details', //  
  };

  /*   render   */
}

→ 이 코드를 실행합니다StackNavigator 기본적으로 플랫폼 자체의 약속을 채택했기 때문에 iOS에서는 제목이 중간이고 안드로이드에서는 왼쪽으로 정렬된다.

헤더에서 매개변수 사용

제목에 파라미터를 사용하려면 navigationOptions 설정 대상을 되돌려 주는 함수 형식으로 써야 합니다.navigationOptions 에서 사용하고 싶을 수도 있습니다. this.props 그러나 이것은 구성 요소 종류의 정적 방법입니다. this 구성 요소의 실례를 가리키지 않기 때문에 속성 props 이 사용할 수 없습니다.그러나 navigationOptions를 함수로 정의하고 React Navigation이 호출할 때 전달 대상{ navigation, navigationOptions, screenProps }을 전달한다. 여기서 우리가 주목하는 것은 navigation이다. 이것은 화면 구성 요소에 정식으로 전달되는 실례this.props.navigation이다.navigation.state.params에서 navigation에서 파라미터를 얻을 수 있다는 것을 기억할 수 있습니다. 현재 우리는 이런 방식으로 파라미터를 가져와 제목으로 사용합니다.

class DetailsScreen extends React.Component {
//  ， React Navigation  :
// { navigation, navigationOptions, screenProps }
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    
    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
    }
  };

  /*   render   */
}

→ 이 코드를 실행합니다
함수navigationOptions에 전달되는 객체는 다음과 같은 속성을 가집니다.

navigation - 화면의 내비게이션 속성 정보, 루트 정보navigation.state에 있습니다.

screenProps - The props passing from above the navigator component

navigationOptions - 새 값이 제공되지 않았을 때 사용하는 부족한 값이나 이전에 사용한 값

이 없으면
위의 예는 navigation만 필요하지만, 어떤 경우에는 screenProps 또는 navigationOptions가 필요할 수도 있습니다.
##사용setParams업데이트navigationOptions우리는 마운트된 스크린 자체에서 현재 활성화된 스크린navigationOptions 구성을 업데이트하는 작업을 자주 합니다.

  /*  render()  */
  <Button
    title=" "
    onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
  />
  /** ， ，  params.otherParam **/

→ 이 코드를 실행합니다

머리 스타일 조정

맞춤형 화면 자신의 머리 스타일은 세 가지 관건적인 속성이 있는데 그것이 바로 headerStyle,headerTintColor와headerTitleStyle이다.

headerStyle: 머리를 감싸는 View 용기에 적용되는 스타일 대상.이 속성에 backgroundColor 을 설정하면 화면 헤더의 배경색이 됩니다.

headerTintColor: 버튼과 제목 문자의 색을 되돌려줍니다.아래의 예에서 우리는 이 속성을 흰색#fff으로 설정하면 되돌아오는 단추와 제목 문자의 색깔은 흰색이다.

headerTitleStyle : if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.

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

  /* render function, etc */
}

→ 이 코드를 실행합니다
여기에 주의해야 할 몇 가지 일이 있다.

iOS에서 상태 텍스트와 아이콘은 검은색인데 어두운 배경에서 보면 별로다.여기에서 우리는 이 문제를 토론하고 싶지 않지만, 당신이 화면 색깔과 일치하도록 상태 표시줄을 맞춤형으로 만들 수 있다는 것은 확실합니다. 상태 표시줄에 방법이 있습니다.

우리가 설정한 것은 Home 화면에만 적용된다.우리가 Details 화면으로 내비게이션을 하자, 부족한 스타일이 다시 돌아왔다.이제 화면 공유navigationOptions 설정을 살펴보겠습니다.

화면 공유navigationOptions 구성

보통 우리는 많은 화면의 머리를 비슷하게 설정해야 한다.예를 들어 당신 회사의 브랜드 색은 빨간색이기 때문에 머리를 빨간색 배경의 흰색 문자로 바꾸고 싶습니다.공교롭게도 이것은 바로 우리가 위에서 실행한 예 중 HomeScreen 화면 헤드의 배색 방안이다.그러나 DetailsScreen 화면에 뛰어들었을 때, 머리 배색이 다시 부족한 설정으로 돌아왔다는 것을 알 수 있을 것이다.navigationOptions 속성 설정을 HomeScreen에서 DetailsScreen로 복사하는 것은 좀 무섭지 않습니까?그럼 앱에 있는 화면마다 이렇게 하면?고맙게도 우리는 이렇게 할 필요가 없다.우리는 배치를 StackNavigator 위로 옮길 수 있다.

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    /*  ， ，  */
  };

  /* render function, etc */
}

/* other code... */

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
    /*   */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

→이 코드를 실행하면 현재RouteStack에 속하는 모든 화면이 우리의 통일된 브랜드 스타일을 사용하고 있다.그러나 확실한 것은 필요한 경우에도 이 설정을 덮어쓸 수 있는 방법이 있어야 한다는 것이다.

공유된 navigationOptions 덮어쓰기

어떤 화면에서 자신이 정의한 navigationOptions와 소속StackNavigator이 정의한 navigationOptions를 합치면 최종적으로 효력이 발생하고 화면에서 정의한 navigationOptions의 우선순위가 높다.우리는 이 지식을 이용하여 DetailsScreen에서 머리 앞의 경치와 배경색을 대조한다.

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
      /*  StackNavigator ! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  };

  /* render function, etc */
}

사용자 정의 어셈블리를 사용하여 제목 바꾸기

제목의 문자와 스타일만 수정하는 것이 아니라 머리를 더 많이 제어해야 할 때가 있다.예를 들어, 제목을 그림으로 바꾸거나, 제목을 단추로 바꾸고 싶을 수도 있다.이 경우 헤더 표준의 제목 구성 요소를 사용자 정의 구성 요소로 교체해야 합니다.

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  ，
    //   LogoTitle
    headerTitle: <LogoTitle />,
  };

  /* render function, etc */
}

→ 이 코드를 실행합니다
너는 왜 우리가 제공한 구성 요소가 이전처럼 주지 않고 headerTitle 주었는지 이상할지도 모른다.이것은 title가 headerTitle의 속성이기 때문에 제목 문자StackNavigator를 표시하는 데 사용되는 title 구성 요소가 부족합니다.

추가 구성

Text 화면StackNavigator에서 사용할 수 있는 속성 옵션의 전체 목록은 StackNavigator 참조 매뉴얼에서 읽을 수 있습니다.

총결산

특정 화면 구성 요소 내에서 navigationOptions 정적 속성을 통해 화면 헤더를 사용자 정의할 수 있습니다.이 속성은 옵션의 전체 목록을 참고할 수 있습니다.

navigationOptions는 하나의 대상이나 함수일 수 있다.함수일 때 호출될 때 대상 매개 변수 navigationOptions 를 제공합니다.

{ navigation, navigationOptions, screenProps }를 초기화할 때 StackNavigator 내비게이션의 모든 화면에 공유할 수 있습니다.그러나 화면마다 정적 속성navigationOptions이 우선순위가 높아 공유 설정을 덮어쓸 수 있다.

영문 원문

이 시리즈의 글 목록

React Navigation Fundamentals 8: 용어 용어집 React Navigation Fundamentals 7: 전체 화면 모드 React Navigation Fundamentals 6: 헤드 버튼 React Navigation Fundamentals 5: 탐색 헤드 React Navigation Fundamentals 구성 4: 화면 간 전환 매개 변수 전달 React Navigation Fundamentals Fundamentals 3: 화면 간 전환 React Navigation Fundamentals Fundamentals 2: Hello Re