如何使用 React Native 导航有条件地呈现 headerLeft？答案

【问题标题】：How to conditionally render headerLeft using React Native navigation?如何使用 React Native 导航有条件地呈现 headerLeft？
【发布时间】：2022-12-19 23:09:18
【问题描述】：

我有一个返回包含几个屏幕的 <Stack.Navigator> 的组件。我还有一个自定义的 headerLeft 元素，它在单击时执行一个函数。现在，如果我在 enterEmail 屏幕上，我会尝试隐藏 headerLeft，但在所有其他屏幕上都可以看到它。

【问题讨论】：

@AseemGautam 你能详细说明一下吗？

标签： react-navigation

【解决方案1】：

您将需要覆盖堆栈屏幕中的组/导航器选项。

<Stack.Screen
  name="EnterEmail"
  options={{ 
    headerTitle: () => headerTitle,
    headerLeft: {} // hide the header
  }}
  component={EnterEmail}
/>

我在导航器级别创建了一个带有徽标和背景的 snack，但堆栈屏幕覆盖了它。

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerStyle: { backgroundColor: 'papayawhip' },
        headerTitle: (props) => <LogoTitle {...props} />
        }}>
        <Stack.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
          headerTitle: {}, // override
          headerStyle: { backgroundColor: 'red' } }} // override
        />
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

【解决方案2】：

您可以使用 useLayoutEffect 删除 EnterEmail 屏幕中的 headerLeft 按钮，如下所示。

const EnterEmail = ({navigation}) => {
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => null,
    })
  }, [navigation])
}

【讨论】：