NativeBase 的弹出窗口未在媒体上显示

Question

我正在开发一个 React Native 应用程序，使用 NativeBase 作为 UI 组件。我遇到了一个问题，即按下帖子时 Popover 组件不会显示。这是应该处理弹出窗口显示的代码片段：

// EditUserPostsScreen.tsx

// ... (other imports)

import { Box, Button, Popover } from 'native-base';

const EditUserPostsScreen = () => {

  const handlePressPost = (postId: number) => {

    setSelectedPostId(postId);

    setShowPopover(true);

  };

  const handleDeletePost = (postId: number) => {

    // Call backend to delete the post and then update state

    // ...

  };


  // ... (other logic)

  return (

    // ... (other JSX)

    {userDetails.posts.map((post) => (

      <Box key={post.id.toString()} /* ...other props... */>

        <TouchableOpacity onPress={() => handlePressPost(post.id)}>

          {/* Post content here */}

        </TouchableOpacity>

        {selectedPostId === post.id && (

          <Popover

            isOpen={showPopover}

            onClose={() => setShowPopover(false)}


          >

            {/* Popover content */}

          </Popover>

        )}

      </Box>

    ))}

    // ... (other JSX)

  );

};

export default EditUserPostsScreen;

handlePressPost 函数应该触发弹出窗口显示，但单击帖子时没有任何反应。我已确认正在使用控制台日志调用该函数。

我尝试过的：

• 确保控制台中没有错误。
• 添加控制台日志以验证函数调用。
• 使用 setShowPopover(true) 检查状态是否已正确更新。

我的环境：

React Native version: "^0.72.6"

"react": "18.2.0",

NativeBase version: "^3.4.28"

Tested on: (Android simulator)

我希望点击帖子时会出现弹出窗口，但目前它根本不出现。

任何人都可以帮助我理解为什么弹出窗口没有显示以及如何修复它？

Answer 1

您需要将邮政编码包装在

trigger

标签内的

popover

属性中。并使用

isOpen

道具根据您的情况显示

popover

尝试这个例子：

import React from "react";
import { Popover, Button, Text, Box, Center, NativeBaseProvider } from "native-base";

function Example() {
  const initialFocusRef = React.useRef(null);
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Box w="100%" alignItems="center">
    <Popover  initialFocusRef={initialFocusRef} trigger={triggerProps => {
      return (
        <Button  
         {...triggerProps}
          onPress={() => setIsOpen(true)}>
          Click me
        </Button>
      );
    }}  isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>

      <Popover.Content width="56">
        <Popover.Arrow />
        <Popover.CloseButton />
        <Popover.Header>Personal Details</Popover.Header>
        <Popover.Body>
          <Text>"Center text"</Text>
        </Popover.Body>
        <Popover.Footer>
          <Button.Group>
            <Button colorScheme="coolGray" variant="ghost">
              Cancel
            </Button>
          </Button.Group>
        </Popover.Footer>
      </Popover.Content>
   
    </Popover>
  </Box>
  )
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1} px="3">
        <Example />
      </Center>
    </NativeBaseProvider>
  );
};