向后导航时反应本机模态不打开

Question

第一次打开时并按下开始它导航到下一页但是当我们按下后退按钮时模态不会再次打开。

它是由于螺旋钻而发生的吗？

Navigation.js

const Navigation = () => {
return (
<NavigationContainer>
  <Stack.Navigator screenOptions={{headerShown: false}}>
    <Stack.Screen name="Welcome" component={Welcome} />
    <Stack.Screen name="SignUp" component={SignUp} />
    <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
 </NavigationContainer>
 );
  };

 export default Navigation;

Home.js

const Home = ({navigation}) => {
return (
<>
  <Header value={navigation} />
  <BottomNavigation />
</>
  );
 };

Header.js Modal 在 Header.js 中

const Header = props => {
 const [shows, setShows] = useState(false);
 return (
    <Modals route={props} value={shows} setValue={setShows} />
</View>

); };

Modal.js

const Modals = props => {
 const {value} = props;
 const {navigate} = props.route.value;
 return (
<View style={styles.main}>
  <Modal transparent={true} visible={value}>
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <TouchableOpacity onPress={() => navigate('SignUp')}>
          <Text style={styles.text}>Sign In</Text>
        </TouchableOpacity>
        <Text style={styles.text}>Get Started</Text>
        <TouchableOpacity>
          <Text style={styles.cancel} onPress={() => props.setValue(false)}>
            Cancel
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  </Modal>
  <View style={styles.buttonView}></View>
</View>

); };