时间戳

首页 > 解决方案 > 包含在屏幕反应原生中的模态

react-native - 包含在屏幕反应原生中的模态

问题描述

我正在使用react-navigation和react-native-modal。

当我打开屏幕 1 时，我有一个打开模式的按钮。在此模式中，有一个导航按钮可以导航到屏幕 2。

这有效，但模态不会被解雇。然后导航动作发生在模态后面（我可以通过背景看到动画）。我想导航到modal 顶部的屏幕 2 ，当我向后导航 ( navigation.goBack()) 时，我希望看到 modal 仍然在屏幕 1 上打开。

我猜它与屏幕堆栈有关。有什么我想念的吗？

屏幕 1 和 2：

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Modal from 'react-native-modal';
import { useNavigation } from '@react-navigation/native';

export default Screen1 = (props) => {
  const { navigate, goBack } = useNavigation();

  const [modal, setModal] = useState(false);
  
  return (
    <View>
      <Text>Screen1</Text>
      <TouchableOpacity onPress={() => setModal(true)}>
        <Text>Open modal</Text>
      </TouchableOpacity>
      <Modal visible={modal}>
        <View>
          <TouchableOpacity onPress={() => navigate('Screen2')}>
            <Text>Go to screen 2</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

export default Screen2 = (props) => {
  const { navigate, goBack } = useNavigation();

  return (
    <View>
      <Text>Screen2</Text>
      <TouchableOpacity onPress={goBack}>
        <Text>Back to screen 1</Text>
      </TouchableOpacity>
    </View>
  );
};

标签： react-nativereact-navigation

解决方案

react-native-modal将始终呈现在您的导航顶部，因为它有一个单独的活动，并且该活动将始终呈现在主要活动的顶部，您必须关闭模式才能看到后面的主要活动，如果您想要返回前一个屏幕的状态时，您必须使用react-navigation-modal这将是您的导航器的一部分，并将保持您的状态。

推荐阅读