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

如何解决react-native-elementsBottomSheet 在故事书中不起作用

我一直在为我的团队创建一些 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.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 和此处的示例：https://reactnativeelements.com/docs/bottomsheet 无法为我提供太多帮助。

解决方法

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

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

我还从那里删除了道具 presentationStyle: 'fullScreen' 并添加了 statusBarTranslucent: true,。

（React Native 版本：0.63）