React native 如何从屏幕更新导航标题？

我正在制作一个测验应用程序，在每个新问题上（一个新的测验屏幕，

QuestionScreen.js

），我想更新导航栏中的标签，该标签在

app.js

在

App.js

中，这里的问题是我不知道如何将状态

questionIndex

传递到

HomeScreen

或

QuestionScreen

，通常我认为这将使用像

这样的道具。我试图在

选项中传递它们，但似乎不起作用

react-native version 0.62

[github上的完整代码]
我是一个反应原生的新手，我来自原生移动开发，这个堆栈。Navigator api看起来很奇怪，我不能从屏幕组件本身管理导航头吗？这将使事情变得更容易。
很难自定义react navigation提供的默认标题，您可以做的是禁用标题并创建自己的自定义标题

通过在createStackNavigator中提供prop headerMode={“none”}来禁用标头，并在顶部设置您自己的自定义标头

要禁用标题文档：
您应该使用上下文或redux，例如上下文：

page-context.js

app.js

const-App=（）=>{
常量[questionIndex，setQuestionIndex]=useState（0）；
返回(
//你的路线
)

QuestionScreen.js


功能问题屏幕（{路线、导航、选项}）{
const[questionIndex]=useContext（PageContext）；
React.useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
),
});
}，[导航，问题索引]；
}

use可以使用setQuestionIndex在您想要的每个屏幕中更改questionIndex
我应该将这个
headerMode={'none'}放在哪里
？…理想情况下，当一个屏幕移动到下一个屏幕时，我希望自定义标题保持固定，而此自定义标题只是另一个视图。因此，禁用堆栈导航器中的标题将是动画，请执行此操作。
。您可以使用此自定义标题
…探索此操作
const App = () => {
  const [questionIndex, setQuestionIndex] = useState(0);

  return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'
      > 
      <Stack.Screen 
      name='Home'
      component={HomeScreen}
      options={{
        title:''
    }}
      />
      <Stack.Screen
      name='QuestionScreen'
      component={QuestionScreen} 
      options={({ navigation }) => ({
        headerBackTitleVisible: false,
          headerRight: ()=>(<HeaderRight pageIndex={questionIndex}/>),
           headerRightContainerStyle: {
                        alignItems: "flex-end",
                        paddingRight: 25
            },
      })}
    />


function HeaderRight(props) {
  return (
      <Text>{props.pageIndex}/{questions.length-1}</Text>
    );
}
const HomeScreen = ({ navigation }) => {

  return (
    <View style={styles.container} >
    <ScrollView>

    <TouchableOpacity onPress={()=> 
      //here I'm unable to retrieve the questionIndex props.
      //tried navigation.getParams("questionIndex") or route.params
      
      navigation.navigate('QuestionScreen', {
          pageIndex: 0
      })
    }>

function QuestionScreen({route, navigation, options}) {

    const { pageIndex } = route.params;

export const PageContext= React.createContext();

const App = () => {
const [questionIndex, setQuestionIndex] = useState(0);

return(
    <PageContext.Provider value={[questionIndex, setQuestionIndex]}>
       <NavigationContainer> // your routes
    </PageContext.Provider>)

function QuestionScreen({route, navigation, options}) {
    const [questionIndex] = useContext(PageContext);
     React.useLayoutEffect(() => {
        navigation.setOptions({
          headerRight: () => (
            <HeaderRight pageIndex={questionIndex}/>
          ),
        });
      }, [navigation, questionIndex]);
}