Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
419 views
in Technique[技术] by (71.8m points)

react-native-elements BottomSheet not working in storybook

I've been creating some react-native-elements Storybook examples for my team, but I cant seem to get the BottomSheet to work. Will this component work on the web (expo app or in storybook)? Here's my code:

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 = {};

I do see the contents of the bottom sheet, but I can't get it to hide and it doesn't overlay the other components - it simply appears beneath.

The examples here: https://react-native-elements.js.org/#/bottom-sheet & here: https://reactnativeelements.com/docs/bottomsheet haven't been able to provide me much help.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...