Ios 如何截断'；背面'；导航中的标题按钮？

我正在使用带有

StackNavigator

的react导航。是否有办法通过截断后退按钮标签来避免后退按钮标签与

标题重叠

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

const main导航选项={
头型：{
背景颜色：颜色。密码学
},
头饰样式：{
颜色：'白色'，
身高：50，
宽度：140
},
头部颜色：“白色”，
标题：
用于测试的长文本
}

问题说明：

为按钮标签创建一个样式，因为它现在留给您自己设置样式，您可以按照自己的方式设置样式

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

您可以使用
而不是图标，但我假设您使用的是图标，即react native vector图标或类似图标

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>
                           )   
 }

const main导航选项={
头型：{
背景颜色：颜色。密码学
},
头饰样式：{
颜色：'白色'，
身高：50，
宽度：140
},
.....
headerLeft:（goBack（）}>
用于测试的较长文本
)   
}
如果要缩短后退按钮标签，为什么不使用以下任一选项：


headerBackTitle
（更改上一屏幕的后标签，将其置于上一屏幕的导航选项中）
标题BackTitleStyle
（更改当前屏幕上显示的背面标签，将其置于当前屏幕的导航选项中）
（此回答考虑到观众正在使用react navigation 5.x）

在屏幕组件中

export const screenpoptions=（navData）=>{
让title=navData.route.params.movieTitle；
如果（标题长度>18）{
title=title.substr（0,18）+“…”；
}
返回{
标题：标题，
};
};

在这里，由于我们使用的是substr（），因此您可以相应地使用它并截断它以自定义匹配您的情况，同时记住边缘情况

然后，您可以将其导入AppNavigator.js或初始化导航器的任何位置（在下面的示例中；）

从导入{screenOptions as MoviesDetailScreenOptions}
“./screens/MovieDetailScreen”；

这里screenOptions是您正在使用的命名导出MoviesDetailScreenOptions是别名（如果我没弄错的话）