如何使用 React Native 创建一个基本弹窗组件

2023-09-12 00:40:42

简介

在React Native中，弹窗是一个非常重要的组件，它可以用来显示各种各样的信息，比如提示、警告、确认等。同时，弹窗还可以用来收集用户输入，比如登录、注册等。

实现步骤

1. 创建一个新的 React Native 项目

npx create-react-native-app MyPopupApp

2. 安装依赖项

npm install @react-native-community/popup-menu

3. 在 `App.js` 文件中导入 PopupMenu 组件

import PopupMenu from '@react-native-community/popup-menu';

4. 在 `App.js` 文件中创建组件

const App = () => {
  const [visible, setVisible] = useState(false);

  const onPress = () => {
    setVisible(true);
  };

  const onSelect = (value) => {
    setVisible(false);
    console.log('Selected: ', value);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Popup" onPress={onPress} />
      <PopupMenu
        isVisible={visible}
        onBackdropPress={() => setVisible(false)}
        onSelect={onSelect}
        actions={[
          {
            title: 'Action 1',
          },
          {
            title: 'Action 2',
          },
          {
            title: 'Action 3',
          },
        ]}
      />
    </View>
  );
};