Реакция навигации Нижние вкладки не обновляют экран

Question

Я новичок в реагировать на нативную и имею следующую проблему, которую я не могу выяснить сам:

Я пытаюсь изменить компонент ниже [да, я действительно имею в виду ниже] компонент нижней вкладки. После нажатия на одну из вкладок компонент ниже должен измениться. Но содержимое экрана не меняется, когда я нажимаю на одну из вкладок. Что я делаю неправильно? Кроме того, у меня уже есть второй NavigationContainer в приложении. По этой причине я установил независимый флаг в значение {true}.

Я использую реактивную-нативную с expo и response-navigation5, как вы можете видеть в атакованном пакете. json file.

визуализация этой проблемы

Гардероб. js:

const App = () => {
  return (
      <ScrollView>
        <Text>Just for testing purpose 1</Text>
        <AvatarItemPickerMain/>
        <Text>Just for testing purpose 2</Text>
        <Text>Change this component when clicking on tab.</Text>
      </ScrollView>
  )};

export default App;

---

AvatarPickerMain. js:

const AvatarItemPickerMain = () => {
  return (
    <NavigationContainer independent={true}>
      <MainTabScreen ></MainTabScreen>
    </NavigationContainer>
  );
}

export default AvatarItemPickerMain;

---

MainTabScreen. js:

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';

import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import ExploreScreen from './ExploreScreen';
import ProfileScreen from './ProfileScreen';

const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
    >
      <Tab.Screen
        name="Notifications"
        component={DetailsStackScreen}
        options={{
          tabBarLabel: '-->DetailsScreen<--',
          tabBarColor: '#1f65ff',
          tabBarIcon: ({ color }) => (
            <Icon name="ios-notifications" color={color} size={26} />
          ),
        }}
      />

      <Tab.Screen
        name="Profile"
        component={ProfileStackScreen}
        options={{
          tabBarLabel: '-->Profile<--',
          tabBarColor: '#1f65ff',
          tabBarIcon: ({ color }) => (
            <Icon name="ios-notifications" color={color} size={26} />
          ),
        }}
      />
     // some more screens are here
    </Tab.Navigator>
);

export default MainTabScreen;

const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
        headerStyle: {
        backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold'
        }
    }}>
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title:'Overview'}} />
</HomeStack.Navigator>
);

const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator screenOptions={{
        headerStyle: {
        backgroundColor: '#1f65ff',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold'
        }
    }}>
        <DetailsStack.Screen name="Details" component={DetailsScreen} options={{

        }} />
</DetailsStack.Navigator>
);

---

DetailsScreen. js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const DetailsScreen = ({navigation}) => {
    return (
      <View style={styles.container}>
        <DisplaySomeComponent>  TODO  </DisplaySomeComponent>
        <Text>Details Screen</Text>

      </View>
    );
};

export default DetailsScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
});

пакет. json:

{
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/drawer": "^5.4.0",
    "@react-navigation/native": "^5.1.1",
    "@react-navigation/stack": "^5.2.3",
    "@react-navigation/material-bottom-tabs": "^5.1.6",
    "react-native-paper": "^3.6.0",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-action-button": "^2.8.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-material-ui": "^1.30.1",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.8",
    "react-native-super-grid": "^3.1.2",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "styled-components": "^5.0.1"
 },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}