尝试在react-native-modal中组合2个或多个模态

Question

我使用了react-native modals https://github.com/react-native-community/react-native-modal。我正在尝试使用多个模态从侧面结合下半模态和模态滑动。但是当从第二个模式返回到第一个模式时，模式下降(关闭)，然后另一个模式打开。请看下面的视频，看看我想做什么。

我试图通过模式https://youtu.be/YaMjp_VJ_9Y获得的结果

使用react-native-modal https://youtu.be/GR8otXHhElc时发生了什么

代码

export default class App extends Component<Props> {
  state = {
    visibleModal: null
  };

  renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.button}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );

  renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello!</Text>
      {this.renderButton("Next Modal", () =>
        this.setState({ visibleModal: 6 })
      )}
      {this.renderButton("Close", () => this.setState({ visibleModal: null }))}
    </View>
  );

  renderNextModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello from next modal!</Text>
      {this.renderButton("BACK", () => this.setState({ visibleModal: 5 }))}
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        {this.renderButton("modal", () => this.setState({ visibleModal: 5 }))}
        <Modal
          isVisible={this.state.visibleModal === 5}
          onBackButtonPress={() => this.setState({ visibleModal: null })}
          style={styles.bottomModal}
        >
          {this.renderModalContent()}
        </Modal>
        <Modal
          isVisible={this.state.visibleModal === 6}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
          onBackButtonPress={() => this.setState({ visibleModal: null })}
          style={styles.bottomModal}
        >
          {this.renderNextModalContent()}
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  bottomModal: {
    // flex: 0,
    justifyContent: "flex-end",
    margin: 0
  },
  button: {
    backgroundColor: "lightblue",
    padding: 12,
    margin: 16,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  },
  modalContent: {
    backgroundColor: "white",
    padding: 22,
    justifyContent: "flex-end",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  }
});

Answer 1

我担心modal不应该以这种方式使用。在我看来，您尝试归档的内容可以在不使用2模式的情况下完成

My suggestion

• 创建一个组件，该组件将在组件中调用modal
• 时挂载。您将创建两个视图，您可以将它们添加到slidein视图
• 中，因此，当您按下触发器时，另一个视图将直接滑入相同的模式

中

希望这对你有所帮助！

Answer 2

我在我的一个项目中遇到了类似的问题，它变得越来越大，越来越多的模态被创建在越来越多的屏幕和场景中(没有在前台通知等方面发言)。),

所以我最终创建了这个package，用于控制我的应用程序中具有自己的层次结构的所有模态

Answer 3

@ interface / react- native -modal使用钩子接口，而不是像react-native和react-native-modal实现那样使用额外的本地层。

这意味着新的模态只会出现在新的图层上，所以你可以添加任意多的新模态。

但是，您必须确保您有一种适当的方法将它们从有问题的组件中删除！

https://www.npmjs.com/package/@idiosync/react-native-modal