ios - 如何在 react 导航中截断 headerTitle 的 'back' 按钮？

Question

我正在使用带有 StackNavigator 的 react 导航。有没有办法通过截断后退按钮标签来避免后退按钮标签与 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

(此答案考虑到查看者正在使用 react-navigation 5.x)

In Your Screen component

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

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

Then you can import it in your AppNavigator.js or wherever you initialize your navigator (in my case below ;)

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

Here screenOptions is the named-export you are using MoviesDetailScreenOptions is the alias if i am not mistaken.