Menggunakan navigasi React-Native tetapi bukan tindanan?

Question

Jadi saya telah mengusahakan React-Native baru-baru ini dan telah mencapai kemajuan yang besar. Saya tahu cara menggunakan React-Navigation, sama ada @react-navigation/native-stack atau @react-navigation/bottom-tabs. Tiada masalah apabila menggunakan ini.

Tetapi untuk lebih memahami alatan yang saya gunakan, saya ada soalan:

Apabila menggunakan Navigator seperti yang dimaksudkan, anda akan mendapat berbilang skrin yang "bertindan" di atas satu sama lain, atau dipisahkan apabila kembali ke skrin sebelumnya. Saya sering melihat ke Twitter untuk inspirasi reka bentuk, dan saya tidak dapat membantu tetapi menyedari bahawa aplikasi web mereka tidak menggunakan pendekatan "bertindan" ini.

Demi kesederhanaan, saya hanya bercakap tentang bahagian web di sini, tetapi ia pada asasnya sama pada iOS, skrin akan bertindan. (Jelas sekali saya tidak dapat melihat jika apl Twitter tidak bertindan seperti apl web, tetapi apa sahaja).

Apabila menggunakan Navigator dengan cara yang betul seperti yang didokumenkan

   //Kandungan skrin


   //Kandungan skrin 2


   //Kandungan skrin 3

Jadi, semua komponen skrin dipaparkan secara teknikal, hanya skrin yang dipilih tidak disembunyikan. 
Apa yang saya mahu lakukan ialah sentiasa memaparkan hanya satu skrin, tiada skrin lain disembunyikan. Apabila pengguna "menavigasi" ke skrin lain, saya mahu kandungan skrin yang satu ini berubah bergantung pada halaman yang mereka akan pergi. 
Cara Twitter berfungsi ialah mereka mempunyai  bekas yang mengandungi kandungan halaman dan bergantung pada halaman yang digunakan pengguna, mengubahnya bekas dengan sewajarnya Kandungan. Twitter memang menggunakan React-Native, jadi mesti ada cara untuk melakukan ini. Saya harap ada sekurang-kurangnya cara separa rasmi untuk melakukan ini, dan bukannya cara de facto untuk melakukannya. Saya telah mencari dalam dokumentasi 'React-Navigation' tetapi tidak menemui penerangan yang serupa. 
Sebagai ringkasan: React-Navigation "tindanan" skrin supaya ia wujud serentak, tetapi hanya skrin "di atas" timbunan dipaparkan. Saya sedang mencari cara untuk menggunakan hanya satu skrin dan mengubah kandungan skrin itu berdasarkan halaman yang dilayari pengguna. 
Saya telah mencari melalui dokumentasi untuk React-Navigation, cuba mencari penerangan tentang tingkah laku yang serupa dengan apa yang saya cari, tetapi tidak menemui apa-apa. Jika terdapat pustaka navigasi React yang lebih baik yang melakukan lebih banyak perkara yang telah saya terangkan, saya ingin menunjukkannya. 

Answer 1

Apa yang anda mahu lakukan adalah lebih sesuai dengan seni bina aplikasi satu halaman di mana anda mempunyai satu bekas utama yang menyimpan kandungan yang berubah-ubah berdasarkan navigasi, namun, React Navigation direka untuk menyusun skrin dan menavigasi antaranya.

Penyelesaian

Anda boleh mencipta komponen navigasi tersuai, sebutkan ia NavigationContainer, yang menyimpan kandungan yang berubah-ubah Komponen ini akan mengurus halaman yang sedang dipaparkan dan memaparkan kandungan dengan sewajarnya, serupa dengan ini:

const NavigationContainer = () => {
  const [currentPage, setCurrentPage] = useState('Home'); // 默认页面

  const navigateTo = (page) => {
    setCurrentPage(page);
  };

  const renderContent = () => {
    switch (currentPage) {
      case 'Home':
        return <HomeContent />;
      case 'Profile':
        return <ProfileContent />;
      // 添加更多不同页面的情况
      default:
        return null;
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <CustomNavBar navigateTo={navigateTo} />
      {renderContent()}
    </View>
  );
};

export default NavigationContainer;

CustomNavBar ialah komponen lain yang mengandungi butang atau pautan untuk setiap halaman. CustomNavBar是另一个包含每个页面按钮或链接的组件。
当按下按钮/链接时，它将调用navigateTo函数，该函数从其父组件即NavigationContainer接收为props，以更新那里的currentPageApabila butang/pautan ditekan, ia memanggil fungsi navigateTo yang diterima sebagai prop daripada komponen induknya iaitu

untuk mengemas kini keadaan currentPage di sana:

const CustomNavBar = ({ navigateTo }) => {
  return (
    <View>
      <TouchableOpacity onPress={() => navigateTo('Home')}>
        <Text>Home</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigateTo('Profile')}>
        <Text>Profile</Text>
      </TouchableOpacity>
      // 添加更多按钮/链接以供其他页面使用
    </View>
  );
};

export default CustomNavBar;

Sekatan

Anda harus melaksanakan pautan dalam untuk navigasi berasaskan URL yang lebih baik, yang akan membolehkan pengguna menavigasi terus ke halaman tertentu menggunakan URL Selain itu, anda perlu mengendalikan penghalaan, animasi dan peralihan secara manual jika diperlukan.

Anda juga mungkin kehilangan beberapa fungsi navigasi terbina dalam yang disediakan oleh perpustakaan seperti React Navigation. 🎜