Как мне всплывающее модальное в начале? Реактивная навигация

Question

Я использую реагирующую навигацию v5 для создания моего модала.

Я хочу, чтобы мой модал показывался в начале на 50% высоты, а когда я нажимаю кнопку, я хочу, чтобы мой модал имел 100% высоты. И переключаться с 50% до 100% на 50% назад и вперед.

Однако я не уверен, как это сделать. Мой код выглядит примерно так:

Навигация

render(){
        return (
            <NavigationContainer>
                <RootStack.Navigator mode="modal" headerMode = "none">
                    <RootStack.Screen name="home" component = {Home} />
                    <RootStack.Screen name="modala" component={ModalA} 
                    options={{cardStyle: {backgroundColor: "transparent"}}}/>
                </RootStack.Navigator>
            </NavigationContainer>
        );
    }

Как вы можете видеть, я хочу, чтобы мой modalA перекрывал домашний компонент в начале как 50% ширины, и если я нажимаю кнопку внутри ModalA Я хочу, чтобы мой модал был на 100%. Это возможно?

Answer 1

Да, это возможно. Чтобы отобразить модальное изображение на начальном экране, вы должны создать на этом экране Модальный компонент , например,

import React, { Component, useState } from 'react';
import {View, Text} from 'react-native';
import Modal from "react-native-modal";

const Home = (props) => {

    const [height, setHeight] = useState('50%');

    return (
      <View>
        <Modal isVisible={true}>
          <View style={{ height, width: "80%", justifyContent: 'center', alignItems: 'center'}}>
            <Text>I am the modal content!</Text>
            <TouchableOpacity onPress={() => setHeight("50%")}>
              <Text>Set 50% Height</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setHeight("100%")}>
              <Text>Set 100% Height</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </View>
    );
}