В React Native, Как создать простой ящик на уровне компонентов?

Question

Я создал простое собственное приложение реагирования, в котором я использовал Drawer Navigator (реагирование-навигация), которое работает нормально.

Мой DrawerNavigator выглядит следующим образом.

const DrawerNavigation = createDrawerNavigator({
  Home: {
    screen: Page1
  },
  ProductList: {
    screen: Page2
  }
},{
  contentComponent: ({ navigation }) => (
    <SideMenu navigation={navigation} />
  ),
  drawerWidth: 300
})
const AppContainer = createAppContainer(DrawerNavigation);

// type Props = {};
export default class App extends Component {
  render() {
    return (
        <AppContainer />
    );
  }
}

Мой вопрос здесь - я хочу создать еще один ящик на уровне компонентов. Это означает, что в моем Page1 компоненте у меня есть кнопка «Фильтр», после нажатия на которую я хочу еще одну Drawer.

Кто-нибудь может мне помочь, как мне этого добиться?

Я попытался создать еще один навигатор, например App.js, в компоненте Page1. Но я не уверен, где визуализировать <AppContainer /> как App.js

Page1 Компонент

export default class Page1 extends Component {

  constructor(props) {
    super(props);
  }

  render() { 
    return (
        <View>            
            <Text >Page 1</Text>
        <Button
                title="Filter"    
        />
        </View>
    );
  }
}