react-native-elements BottomSheet在故事书中不起作用

Question

我一直在为我的团队创建一些react-native-elements Storybook示例，但我似乎无法让BottomSheet工作。这个组件能在网络上工作吗(世博会应用或故事书)？下面是我的代码：

import { Meta, Story } from '@storybook/react';
import React, { useState } from 'react';
import { BottomSheet, BottomSheetProps, Button, ListItem, Text } from 'react-native-elements';

export default {
    title: 'BottomSheet',
    component: BottomSheet,
} as Meta;

const Template: Story<BottomSheetProps> = (props) => {
    const [isVisible, setIsVisible] = useState(false);
    const list = [
        { title: 'List Item 1' },
        { title: 'List Item 2' },
        {
            title: 'Cancel',
            containerStyle: { backgroundColor: 'red' },
            titleStyle: { color: 'white' },
            onPress: () => setIsVisible(false),
        },
    ];

    return (
        <>
            <Text h1>BottomSheet</Text>
            <Button title='Open Buttom Sheet' onPress={() => setIsVisible(true)} />
            <BottomSheet
                isVisible={isVisible}
                containerStyle={{ backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)' }}
                modalProps={{
                    presentationStyle: 'fullScreen',
                    visible: false,
                }}
            >
                {list.map((l, i) => (
                    <ListItem key={i} containerStyle={l.containerStyle} onPress={l.onPress}>
                        <ListItem.Content>
                            <ListItem.Title style={l.titleStyle}>{l.title}</ListItem.Title>
                        </ListItem.Content>
                    </ListItem>
                ))}
            </BottomSheet>
            ;
        </>
    );
};

export const BottomSheetSamples = Template.bind({});
BottomSheetSamples.args = {};

我确实看到了底部页面的内容，但我不能让它隐藏起来，它也不会覆盖其他组件-它只是显示在下面。

这里的例子：https://react-native-elements.js.org/#/bottom-sheet & here：https://reactnativeelements.com/docs/bottomsheet不能给我提供太多的帮助。

Answer 1

我最近遇到了一个类似的问题，我发现BottomSheet isVisible和containerStyle的属性是无用的，所以删除它们。

要控制BottomSheet的可见性，请使用modalProps={{visible: isVisible}}中的属性。

我还从那里删除了属性presentationStyle: 'fullScreen'，并添加了statusBarTranslucent: true,。

(React Native版本: 0.63)