Question

我想在嵌套在 2 个导航器中的屏幕标题中显示后退按钮。

我将首先向您展示我如何嵌套屏幕，然后是我尝试过的内容

主堆栈导航器：

<Provider store = {store}>
        <StatusBar style="light" />
        <NavigationContainer>

      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" 
          component={Login}
          options=  {{
            headerLeft: null,
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 20,
              color: '#FFFFFF'
            },
            headerStyle: {
              backgroundColor: '#121212'
            }
        }}/>

        <Stack.Screen 
          name="Tabs" 
          component={Tabs} <-------------- The screen is nested in tabs
          options=  {{
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
             headerStyle: {
              backgroundColor: '#121212'
            },

          }}/>
      </Stack.Navigator>

    </NavigationContainer>
  </Provider>


      
    );
  } 
}

标签导航器，作为“标签”嵌套在堆栈导航器中：

//Bottom Tabs
function Tabs() {
  return (

<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
  activeTintColor:"#FFFFFF",
  inactiveTintColor:"#696969",
  style: {
    backgroundColor: '#000000'
  },
}}>

  <Tab.Screen 
    name="Create" 
    component={createFlowStack} <------------ This stack is where the screen header I want to add a back button to lies
    options={{ 
      tabBarLabel: ' ',
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="md-add-circle" size={size} color={color} />
      ),
    }}
    
  />

    </Tab.Navigator>
  );
}

我已删除其他选项卡，因为它们与问题无关。这个选项卡，创建，嵌套另一个堆栈导航器，createFlowStack：

createFlowStack，当你点击底部标签“create”时显示

  <CreateStack.Navigator 
    initialRouteName="Create"
    >

      <CreateStack.Screen 
          name="Create" 
          component={Create} />

      <CreateStack.Screen 
          name="Screenshot" 
          component={Screenshot}
          // options={({ navigation }) => ({
          //   headerRight: () => (
          //     <Button 
          //         onPress={() => navigation.goBack()}
          //         title="Info"
          //         color="#fff" />
          //   ),
          // })}
        />

如您所见，选项已被注释掉，但无论如何都无关紧要。我试图在此屏幕左侧的标题中显示一个后退按钮，但我尝试过的一切都不起作用。

我尝试过的：

headerBackTitle：“返回”
headerBackTitle: " "
自定义标题左按钮
headerRight: " "
您看到的自定义标题右侧按钮已注释掉

没有任何效果，没有任何显示，就像 createFlowStack 嵌套的导航器之一覆盖了所有内容。请告诉我如何解决这个问题！

Answer 1

将 expo SDK 从 39 更新到 40 修复了问题！

嵌套导航器选项不起作用甚至显示

1 个答案: