Wie "Zurück" -Taste für HeaderTitle in React-Navigation abgeschnitten?

Question

Ich benutze react-navigation mit StackNavigator. Gibt es eine Möglichkeit, die Überlappung der hinteren Tastenbeschriftung und der headerTitle durch Abschneiden der hinteren Tastenbeschriftung zu vermeiden?

const MainNavigationOptions = { 
    headerStyle: { 
     backgroundColor: colors.CiPrimary 
    }, 
    headerTitleStyle: { 
     color: 'white', 
     height: 50, 
     width: 140 
    }, 
    headerTintColor: 'white', 
    headerTitle: 
    <Text>LONG TEXT FOR TESTING</Text> 
} 

Illustration der Ausgabe:

Answer 1

erstellen einen Stil für die Button-Beschriftung, weil es jetzt die für Sie es, um sich selbst stylen und Sie können es, wie Sie wollen Stil.

  const styles = { 
      leftTouch: { 
       flexDirection: 'row', 
       ... 
      }, 
      customStyle: { 
       paddingLeft: 10, 
       ... 
      } 
      textStyle: { 
      width: 60, 
      fontSize: 14, 
      ...... 
      } 
     } 
     const { leftTouch, customStyle, textStyle} = styles; 

Statt Icon können Sie <Image /> verwenden, aber ich davon ein Symbol verwenden d.h zu reagieren-native-Vektor-Symbol oder mag.

N.B Jetzt haben Sie die Kontrolle über alles, was der Knopf tun sollte, besonders wenn er gedrückt wird.

  const MainNavigationOptions = { 
       headerStyle: { 
        backgroundColor: colors.CiPrimary 
       }, 
       headerTitleStyle: { 
        color: 'white', 
        height: 50, 
        width: 140 
       }, 
      ..... 
       headerLeft: (<TouchableOpacity style={leftTouch} onPress={() => goBack()} > 
           <Icon name="ios-arrow-dropleft-circle-outline" size={25} style={customStyle} color="#ffffff" /> 
           <Text numberOfLines={1} style={textStyle}>A Longer Text for testing</Text> 
          </TouchableOpacity> 
          ) 
} 

Answer 2

Wenn Sie meinen, die Zurück-Taste Etikett zu verkürzen, verwenden Sie, warum auch nicht:

• headerBackTitle (das Rückenschild für den vorherigen Bildschirm ändern, setzen Sie es in navigationOptions des vorherigen Bildschirm);
• headerBackTitleStyle (das Rückenschild auf dem aktuellen Bildschirm angezeigt ändern, setzen Sie es in navigationOptions des aktuellen Bildschirms)