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

Question

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

基本上我的主堆栈看起来像这样：

<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“的标题(其中<允许返回)。

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

我如何才能做到这一点？

(如果这是一个愚蠢的问题，我是个新的反应原生抱歉)。

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

Answer 1

在NewScreen上，您可以使用以下命令：

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

你可以使用任何你想要的标题。你也可以将上一个屏幕中的标题作为道具传递。

Answer 2

实际上，我应该将标题从MainStack屏幕标题中删除，并将其放入HomeStack屏幕标题中。

它的工作方式与预期一致。