반응 탐색을 사용하여 여러 줄 사용자 정의 머리글 바꿈

Question

서랍 탐색기에 포함 된 반응 탐색 스택 탐색기를 사용하고 있습니다. 머리글 텍스트가 길면 머리글 텍스트에 대해 두 줄을 표시하고 싶습니다. 내가 시도한 것은 다음과 같습니다.

static navigationOptions = ({ navigation }) => { 
    return { 
     title: (
      <Text 
       numberOfLines = {2} 
      > 
       Let's see how long the title can be 
      </Text> 
     ), 
     headerTitleStyle: 
      { 
       color: Colors.ORANGE, 
      }, 
     headerTintColor: Colors.ORANGE, 
     headerRight: 
      <MenuIcon 
       navigation = {navigation} 
      />, 
    }; 
}; 

이것은 작동하지 않습니다. 대신 제목이 "어떻게 보일지 보자 ..."라고 표시됩니다. 내 스크린 중 하나에서 비슷한 텍스트 구성 요소를 만들려고 할 때 의도 한대로 텍스트를 래핑합니다.

반응 탐색을 사용하여 여러 줄 제목을 구현하려면 어떻게해야합니까?

Answer 1

이 마침내 제목에 텍스트의 두 라인을 가지고 무엇을 사용했다 :

static navigationOptions = ({ navigation }) => { 
     return { 
      title: (
       <View 
        style = {{width: 220, height: 50}} 
       > 
        <Text 
         numberOfLines = {2} 
         style = {{color: Colors.ORANGE, fontWeight: '700', fontSize: 14, textAlign: 'center', marginRight: 60, marginTop: 12}} 
        > 
         Let's see how long the title can be 
        </Text> 
       </View> 
      ), 
      headerTintColor: Colors.ORANGE, 
      headerRight: 
      <MenuIcon 
       navigation = {navigation} 
      />, 
     }; 
    } 

Answer 2

네비게이션 바 제목에 영향을주는 두 가지 속성 : title (일반 문자열) 및 headerTitle (제목은 children이라는 제목으로 받아 들여지고 렌더링 방식을 재정의 할 수 있음). 이 경우, 제목이 당신이에 다음을 추가 두 줄 렌더링 확인하기 위해 navigationOptions :

headerTitle: ({ style, children : title }) => { 
    return (
    <Text style={style} numberOfLines={2}>{title}</Text> 
) 
},