Почему Touchable Компоненты не работают, когда они находятся вне их схемы расположения? и есть ли способ это исправить? - PullRequest
Новая
       80

Почему Touchable Компоненты не работают, когда они находятся вне их схемы расположения? и есть ли способ это исправить?

0 голосов
/ 29 апреля 2020

Следующий код является результатом моей попытки создать компонент Picker с нуля (и да, я знаю, что есть библиотеки, и даже у реагирующего натива есть свой собственный компонент Picker). 

import React from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';

export default class ThePicker extends React.Component {
    state = {
        isClosed: true,
    }
    _renderItem = (title, onPress=() => {}) => {
        return (
            <TouchableOpacity onPress={onPress}><Text>{title}</Text></TouchableOpacity>
        )
    }
    _openLayout = () => {
        return (
            <View style={{
                backgroundColor: 'gray',
                position: 'absolute',
                width: '100%',
            }}>
                {this._renderItem('choose...', this._toggle)}
                {this._renderItem('one', this._toggle)}
                {this._renderItem('two', this._toggle)}
                {this._renderItem('three', this._toggle)}
                {this._renderItem('four', this._toggle)}
                {this._renderItem('five', this._toggle)}
            </View>
        )
    }
    _closeLayout = () => {
        return (
            <View style={{
                backgroundColor: 'gray',
            }}>
                {this._renderItem('choose...', this._toggle)}
            </View>
        )
    }
    _toggle = () => {
        this.setState({isClosed: !this.state.isClosed});
    }
    _render = () => {
        if (this.state.isClosed) {
            return (
                <View>
                    {this._closeLayout()}
                </View>
            )
        } else {
            return (
                <View>
                    {this._closeLayout()}
                    {this._openLayout()}
                </View>
            );
        }
    }
    render() {
        const picker = this._render();
        return (
            <View style={{
                flex: 1,
            }}>
                <View style={{}}>
                    <Button title="btn1" onPress={() => console.log('btn1')}/>
                </View>
                <View style={{ elevation: 1,}}>
                    {picker}
                </View>
                <View style={{}}>
                    <Button title="btn2" onPress={() => console.log('btn2')}/>
                </View>
            </View>
        )
    }
}

Проблема в том, что что всякий раз, когда открывается средство выбора, оно идет под компонентом кнопки, который существует под ним в макете. Я использовал повышение прав и zIndex, чтобы решить эту проблему, но не достиг того, что хотел. elevation: 5 исправит пользовательский интерфейс, но элементы в Picker потеряют свою кликабельность!

...