Question

我已经使用了本机反应模式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

恐怕不应以这种方式使用模式。从我的角度来看，您要存档的内容无需使用2模态即可完成

我的建议

制作一个可以在调用模态输出时安装的组件
在组件中，您将创建2个视图，并在其中添加动画。幻灯片视图
因此，当您按下触发器时，另一个视图将只在同一模式内滑动

希望获得帮助！

Answer 2

我在我的一个项目中遇到了类似的问题，它变得越来越大，在越来越多的屏幕和场景中创建了越来越多的模态（没有谈到前台通知等......），

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

尝试在react-native-modal

2 个答案: