ios - 如何在 react 导航中截断 headerTitle 的 'back' 按钮？
<p><p>我正在使用带有 <code>StackNavigator</code> 的 react-navigation。有没有办法通过截断后退按钮标签来避免后退按钮标签和 <code>headerTitle</code> 重叠？</p>
<pre><code>const MainNavigationOptions = {
headerStyle: {
backgroundColor: colors.CiPrimary
},
headerTitleStyle: {
color: 'white',
height: 50,
width: 140
},
headerTintColor: 'white',
headerTitle:
<Text>LONG TEXT FOR TESTING</Text>
}
</code></pre>
<p>问题说明:</p>
<p> <a href="/image/lU8N1.png" rel="noreferrer noopener nofollow"><img src="/image/lU8N1.png" alt="Overlapping of back button and header title"/></a> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>(此答案考虑到查看器正在使用 react-navigation 5.x)</p>
<blockquote>
<p>In Your Screen component</p>
</blockquote>
<pre class="lang-js prettyprint-override"><code>export const screenOptions = (navData) => {
let title = navData.route.params.movieTitle;
if (title.length > 18) {
title = title.substr(0, 18) + "...";
}
return {
headerTitle: title,
};
};
</code></pre>
<p>在这里，由于我们使用的是 substr() ，因此您可以相应地使用它并截断它以自定义匹配您的情况，记住边缘情况。</p>
<blockquote>
<p>Then you can import it in your AppNavigator.js or wherever you initialize your navigator (in my case below ;)</p>
</blockquote>
<pre class="lang-js prettyprint-override"><code>import {screenOptions as MoviesDetailScreenOptions} from
"../screens/MovieDetailScreen";
</code></pre>
<blockquote>
<blockquote>
<p>Here screenOptions is the named-export you are using MoviesDetailScreenOptions is the alias if i am not mistaken.</p>
</blockquote>
</blockquote></p>
<p style="font-size: 20px;">关于ios - 如何在 react 导航中截断 headerTitle 的'back' 按钮？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45232319/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45232319/
</a>
</p>
页:
[1]