React Native 0.6 - 导航到子级时替换标题

Posted 2023-02-21

【中文标题】React Native 0.6 - 导航到子级时替换标题

【英文标题】：React Native 0.6 - Replace Header when Navigating to Child

【发布时间】：2021-11-19 12:06:47

【问题描述】：

当导航到堆栈中的子屏幕或兄弟屏幕时，我正在尝试替换标题栏。

基本上我的主堆栈是这样的：

<MainStack.Navigator initialRouteName="Home">
      <MainStack.Screen name="Home" options=
        headerTitle: () => <LogoTitle />,
        tabBarLabel: '',
        tabBarIcon: ( color ) => (
          <AntDesign name='home' backgroundColor='black' color=color size=23 />
        )
       component=HomeStackScreens />
    </MainStack.Navigator>

还有这里的 LogoTitle：

function LogoTitle() 

  const navigation = useNavigation(); 

  return (
    <View style= width: width, flexDirection: 'row', justifyContent: 'space-between' >
      <View>
        <Text style= fontWeight: 'bold' >Brand</Text>
      </View>
      <View></View>
      <View style= width: 50 >
        <AntDesign name='dingding' backgroundColor="#ff" size=23 onPress=() => navigation.reset(
          index: 0,
          routes: [ name: 'New' ],
        ) />
      </View>
    </View>
  );

最后是 HomeStackScreen ：

function HomeStackScreens() 


  const  username  = React.useContext(UserContext) ;

  return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen name="Home" options= headerShown: false  component=HomeScreen />
      <HomeStack.Screen name="New" options= title: username  component=NewScreen />
     
    </HomeStack.Navigator>
  );

当我点击 AntDesign 图标时，我想导航到“新”屏幕，并将 LogoTitle 标题替换为类似于“

基本上，看起来我想在堆栈上推送一个屏幕，但不显示父/上一个屏幕的标题。

我怎样才能做到这一点？

（如果这是一个愚蠢的问题，我是 React Native 的新手，抱歉）。

我最初的想法是我应该更新一个状态，比如 useNavigation 反映的导航状态，但我不确定具体如何（我想为此创建一个自定义上下文将是多余的，因为感觉 useNavigation 可以提供这种行为）。

【参考方案1】：

实际上我应该只是从 MainStack Screen 标题中删除标题，并将其放在 HomeStack Screen 标题中。

它按预期工作。

【参考方案2】：

在 NewScreen 上，您可以使用以下内容：

useEffect(()=>
      navigation.setOptions( headerTitle: 'Title of the Screen'  )
  ,[])

你可以使用任何你想要的标题。您也可以将前一屏的标题作为道具传递。

【讨论】：

感谢您的回答。这会更改新屏幕的标题标题，而不是父屏幕。我想隐藏父母的标题，并且只有带有后退按钮和自定义标题的新标题（设置自定义标题没有问题，但在子项中隐藏父标题）。

从这篇文章github.com/react-navigation/react-navigation/issues/1037看来，合适的方法是在上下文/减速器中处理它。