Блог

Я создавал несколько примеров сборника рассказов react-native-elements для своей команды, но, похоже, я не могу заставить нижнюю таблицу работать. Будет ли этот компонент работать в Интернете (в приложении expo или в сборнике рассказов)? Вот мой код:

 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 и здесь: https://reactnativeelements.com/docs/bottomsheet вы не смогли оказать мне большой помощи.

Недавно я столкнулся с аналогичной проблемой, и я обнаружил, что свойства BottomSheet isVisible и containerStyle бесполезны, поэтому удалите их.

Для управления видимостью нижней таблицы используйте свойство in modalProps={{visible: isVisible}} .

Я также удалил оттуда реквизит presentationStyle: 'fullScreen' и добавил statusBarTranslucent: true, .

(Версия React Native: 0.63)