问题描述
我一直在为我的团队创建一些 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)