React Navigation：堆栈导航器屏幕未显示后退按钮答案

【问题标题】：React Navigation: Back buttons are not showing for stack navigator screensReact Navigation：堆栈导航器屏幕未显示后退按钮
【发布时间】：2020-11-17 13:14:04
【问题描述】：

我创建了一个堆栈导航器，并且标题正确显示，除了导航器内所有屏幕的后退按钮。奇怪的是，当我点击后退按钮应该在的位置时，它起作用了。

目的是显示没有后退按钮标题的“后退”图标，但该图标不可见。

知道可能出了什么问题吗？这是反应导航中的一个已知问题吗？下面是部分代码，很简单：

 /*
 */

 function LoginStackScreen() {
   return (
     <LoginStack.Navigator>
       <LoginStack.Screen
         name="Login"
         component={Login}
         options={{ title: null }}
       />
     </LoginStack.Navigator>
   );
 }

 function MainStackScreen() {
   return (
     <MainStack.Navigator>
       <MainStack.Screen
         name="HomeTab"
         component={HomeTab}
         options={{ headerShown: false }}
       />
       <MainStack.Screen
         name="Post"
         component={Post}
         options={{
           headerBackTitleVisible: false,
           headerTitle: null,
           headerTintColor: "black",
           headerStyle: { shadowColor: "transparent" },
         }}
       />
       <MainStack.Screen
         name="Profile"
         component={Profile}
         options={({ route }) => ({
           headerBackTitleVisible: false,
           headerTintColor: "black",
           headerStyle: { shadowColor: "transparent" },
         })}
       />
       <MainStack.Screen
         name="Mypage"
         component={Mypage}
         options={{
           headerBackTitleVisible: false,
           headerTitle: null,
           headerTintColor: "black",
           headerStyle: { shadowColor: "transparent" },
         }}
       />
     </MainStack.Navigator>
   );
 }

 export default function App() {
   /*

     */
   return (
     <NavigationContainer>
       <SafeAreaView style={{ flex: 1 }}>
         {user.data === null ? <LoginStackScreen /> : <MainStackScreen />}
       </SafeAreaView>
     </NavigationContainer>
   );
 }

【问题讨论】：

你能分享一下你得到的截图吗？

标签： react-native react-navigation

【解决方案1】：

在 MainStack.screen 中有一个名为 headerBackTitleVisible : false 的选项，如果将此值更改为 true 或删除此选项，则可以显示返回按钮

<MainStack.Screen
     name="Post"
     component={Post}
     options={{
       headerBackTitleVisible: false,  // this
       headerTitle: null,
       headerTintColor: "black",
       headerStyle: { shadowColor: "transparent" },
     }}
   />

编辑：

我在一个项目中尝试过这个，它显示了后退图标，但没有显示标题问候！

<Stack.Screen
    name="Name"
    component={Component}
    options={{
      headerTitle: null,
      headerTintColor: "black",
      headerStyle: { shadowColor: "transparent" },
    }}
  />

【讨论】：

嗨 Enzo，我的意图实际上是隐藏标题但显示后退图标本身，所以我故意将 headerBackTitleVisible 设置为 false。关于如何显示图标的任何想法？谢谢！

【解决方案2】：

headerBackTitleVisible 将隐藏标题和图标。

您可以将headerBackTitle 设置为“”以仅隐藏标题

<MainStack.Screen
     name="Post"
     component={Post}
     options={{
       headerBackTitleVisible: true,  // this
       headerBackTitle : "",  // add this
       headerTitle: null,
       headerTintColor: "black",
       headerStyle: { shadowColor: "transparent" },
     }}
   />

【讨论】：