如何在反应导航中截断headerTitle的“后退”按钮？

Question

我正在对StackNavigator使用反应导航。有没有一种方法可以通过截断后退按钮标签来避免后退按钮标签和headerTitle重叠？

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

插图说明：

Answer 1

为按钮标签创建样式，因为现在它可以让您自己设置样式，您可以根据需要进行样式设置。

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

[您可以使用<Image />而不是图标，但假设您使用的是图标，例如react-native-vector-icon或点赞。

N.B现在，您可以控制按钮应该执行的所有操作，尤其是在按下按钮时。

         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

如果要缩短后退按钮标签，为什么不使用其中之一：

• [headerBackTitle（更改前一屏幕的后退标签，将其放在前一屏幕的navigationOptions中）；
• [headerBackTitleStyle（更改当前屏幕上显示的后退标签，将其放在当前屏幕的NavigationOptions中）]

Answer 3

（（此答案考虑到观众正在使用react-navigation 5.x）

在您的屏幕组件中

export const screenOptions = (navData) => {
  let title = navData.route.params.movieTitle;
  if (title.length > 18) {
    title = title.substr(0, 18) + "...";
  }
  return {
    headerTitle: title,
  };
};

在这里，由于我们正在使用substr（），因此您可以相应地使用它，并截断它以自定义匹配您的大小写，同时请注意边缘情况。

然后，您可以将其导入AppNavigator.js或初始化导航器的任何位置（在我的情况下为;;]

import {screenOptions as MoviesDetailScreenOptions} from
"../screens/MovieDetailScreen";

这里screenOptions是您使用的MoviesDetailScreenOptions的命名导出，如果我没记错的话，是别名。