OGeek|极客世界-中国程序员成长平台

标题: ios - 如何在 react 导航中截断 headerTitle 的 'back' 按钮？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:20
标题: ios - 如何在 react 导航中截断 headerTitle 的 'back' 按钮？

我正在使用带有 StackNavigator 的 react-navigation。有没有办法通过截断后退按钮标签来避免后退按钮标签和 headerTitle 重叠？

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

问题说明:

---

Best Answer-推荐答案

(此答案考虑到查看器正在使用 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.

关于ios - 如何在 react 导航中截断 headerTitle 的 'back' 按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45232319/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4