Есть ли в React Native способ сделать глубоко вложенный элемент полноэкранным элементом? - PullRequest
Новая
       14

Есть ли в React Native способ сделать глубоко вложенный элемент полноэкранным элементом?

1 голос
/ 10 апреля 2020

У меня есть приложение React Native Expo, в котором я хотел бы сделать элемент полноэкранным, по существу, со следующими стилями: 

{
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0
}

Проблема в том, что я хочу сделать это для элемента глубоко вложено в структуру моего экрана. В качестве упрощенного примера, структура моего текущего экрана выглядит примерно так: 

<View>
    <View>
        <View>
            <ComponentA>
                <ComponentB>
                    <ComponentC>
                    </ComponentC>
                    <ComponentC>
                    </ComponentC>
                    <ComponentC>
                    </ComponentC>
                </ComponentB>
            </ComponentA>
        </View>
    </View>
</View>

Что я хочу сделать, это настроить что-то в ComponentC, чтобы при нажатии кнопки в этом компоненте это заставляет элемент в этом же компоненте отображаться в полноэкранном режиме.

Очевидно, что в React Native все элементы по умолчанию position: relative. Таким образом, когда я применяю вышеуказанные стили к элементу, который я хочу, чтобы он был полноэкранным в ComponentC, он отображается не как полноэкранный, а скорее как заполнение всего этого конкретного ComponentC.

Есть ли способ обойти это? Я думал о том, чтобы взять часть ComponentC, которую я хочу иметь в полноэкранном режиме, и поместить ее вне ComponentC и в верхней части структуры моего экрана, но затем она полностью отделена от самого ComponentC, а затем Я должен был бы также координировать этот отдельный элемент, чтобы он работал со всеми различными ComponentC s на экране. Кроме того, когда я попытался сделать это, я столкнулся с множеством проблем при попытке должным образом поддерживать состояние.

Может быть, я просто выбрал неправильный подход, но есть ли способ получить то, что я Я хочу использовать простой стиль, чтобы глубоко вложенный элемент мог отображаться в полноэкранном режиме, или мне придется придумать какую-то сложную вещь, чтобы делать то, что я хочу, и, если это последнее, какие-нибудь рекомендации о том, как к этому подойти? Спасибо.

Ответы [ 2 ]

2 голосов
/ 11 апреля 2020

Если вы хотите разделить ваш компонент, вы можете связаться с Компонентом C с верхним компонентом напрямую с DeviceEventEmitter

в Компоненте C: 

import {
  DeviceEventEmitter
} from 'react-native'

В функции которые обрабатывают действие onPress вашей кнопки, вы можете вызвать DeviceEventEmitter следующим образом: 

DeviceEventEmitter.emit('whateverName', { myData: {} })

Затем в верхнем компоненте 

DeviceEventEmitter.addListener('whateverName', (myData) => );
1 голос
/ 10 апреля 2020

Для отображения чего-либо в полноэкранном режиме независимо от того, где вы находитесь в иерархии, вы можете использовать компонент Modal: https://reactnative.dev/docs/modal.

Примечание: это решение не будет работать "из коробки", если вы хотите, чтобы относительно позиционированный элемент плавно переходил в полноэкранный режим (так называемый переход с героя или с общим элементом) - не уверен, что это так. что вы после.

...