如何在开头弹出模态?React本地导航

Question

我正在使用react navigation 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>
);
}

正如你所看到的，我希望我的模态a在开始时与主成分重叠50%的宽度，如果我在模态a内按下按钮，我希望模态为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>
);
}