当前位置：首页 > React

react native实现弹窗

2026-01-26 20:08:13React

实现弹窗的基本方法

React Native中实现弹窗可以使用内置的Modal组件或第三方库如react-native-modal。Modal是官方提供的组件，简单易用；react-native-modal则提供更多动画和样式定制选项。

使用内置Modal组件

引入Modal组件并设置visible属性控制显示/隐藏：

import React, { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="打开弹窗" onPress={() => setIsVisible(true)} />
      <Modal
        visible={isVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setIsVisible(false)}>
        <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <View style={{ backgroundColor: 'white', padding: 20 }}>
            <Text>这是弹窗内容</Text>
            <Button title="关闭" onPress={() => setIsVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
};

使用react-native-modal库

安装库后实现更丰富的动画效果：

npm install react-native-modal

示例代码：

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="打开弹窗" onPress={() => setIsVisible(true)} />
      <Modal
        isVisible={isVisible}
        onBackdropPress={() => setIsVisible(false)}
        animationIn="zoomIn"
        animationOut="zoomOut">
        <View style={{ backgroundColor: 'white', padding: 20 }}>
          <Text>带动画的弹窗</Text>
          <Button title="关闭" onPress={() => setIsVisible(false)} />
        </View>
      </Modal>
    </View>
  );
};

弹窗样式定制

通过StyleSheet自定义弹窗外观：

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.3)'
  },
  innerContainer: {
    width: '80%',
    borderRadius: 10,
    padding: 20,
    backgroundColor: '#fff'
  }
});

高级功能实现

对于复杂场景可结合状态管理：

react native实现弹窗

全局弹窗管理使用Context API
动态内容通过props传递
多弹窗叠加使用zIndex控制层级

// 全局弹窗示例
const ModalContext = React.createContext();

const ModalProvider = ({ children }) => {
  const [modalContent, setModalContent] = useState(null);

  const showModal = (content) => setModalContent(content);
  const hideModal = () => setModalContent(null);

  return (
    <ModalContext.Provider value={{ showModal, hideModal }}>
      {children}
      <Modal visible={!!modalContent} transparent>
        {modalContent}
      </Modal>
    </ModalContext.Provider>
  );
};