当在react原生中使用底部导航时，如何跟踪屏幕标题？

import React, { useState } from 'react';

const ScreenComponent = () => {
  const [title, setTitle] = useState('屏幕标题');
  
  // 其他组件逻辑...
  
  return (
    <div>
      <h1>{title}</h1>
      {/* 其他组件内容 */}
    </div>
  );
};

import React, { useState } from 'react';

const BottomNavigation = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  
  const handleNavigationChange = (index) => {
    setSelectedIndex(index);
  };
  
  return (
    <div>
      {/* 底部导航组件代码 */}
    </div>
  );
};

import React, { useState } from 'react';

const BottomNavigation = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  
  const handleNavigationChange = (index) => {
    setSelectedIndex(index);
  };
  
  return (
    <div>
      {/* 底部导航组件代码 */}
      <ul>
        <li onClick={() => handleNavigationChange(0)}>屏幕1</li>
        <li onClick={() => handleNavigationChange(1)}>屏幕2</li>
        <li onClick={() => handleNavigationChange(2)}>屏幕3</li>
      </ul>
    </div>
  );
};

import React, { useState, useEffect } from 'react';

const ScreenComponent = ({ index }) => {
  const [title, setTitle] = useState('屏幕标题');
  
  useEffect(() => {
    if (index === 0) {
      setTitle('屏幕1标题');
    } else if (index === 1) {
      setTitle('屏幕2标题');
    } else if (index === 2) {
      setTitle('屏幕3标题');
    }
  }, [index]);
  
  // 其他组件逻辑...
  
  return (
    <div>
      <h1>{title}</h1>
      {/* 其他组件内容 */}
    </div>
  );
};