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

您可以使用{{1}}而不是Icon，但假设您使用的是图标，即react-native-vector-icon或者喜欢。

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

{{1}}

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的命名导出。

如何在react-navigation中截断headerTitle的“后退”按钮？

3 个答案: