Как сохранить сенсорные элементы нажимаемыми, когда вне родительского контейнера - PullRequest
Новая
       5

Как сохранить сенсорные элементы нажимаемыми, когда вне родительского контейнера

0 голосов
/ 12 января 2020

Я пытаюсь создать выпадающее меню, прямо противоположное выпадающему меню. Объект имеет «неактивное» состояние, в котором он свернут, и «активное» состояние, в котором меню расширяется вверх (см. Рисунок справа), показывая все параметры. Сенсорные непрозрачные элементы, содержащие «1x», «2x», однако по какой-то причине становятся недоступными для сжатия при расширении меню. Опции меню, содержащиеся в родительском представлении, являются нажимаемыми (предполагаемая функциональность). Я хотел бы, чтобы элементы, содержащиеся вне родителя (bar в основном), также были нажимаемыми. По какой-то причине эта проблема существует только в android версии приложения, а проблема отсутствует в iOS.

Я пытался настроить z-показатели и угол наклона этих кнопок и их соответствующие представления, но это не похоже на работу.

Фотографии главной страницы ниже.

Main. js

class Main extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection:'column-reverse', backgroundColor:'black'}}>
                <View style = {styles.bar}>
                    <DropUpMenuTwo />
                </View>
            </View>
        )
    }
}

export default (Main)

const styles = StyleSheet.create({
    bar: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height * 0.10,
        backgroundColor: 'white',
        flexDirection:'column-reverse'
    }
});

Код DropUpMenu 

let data = [{
        value: '1x',
    }, {
        value: '2x',
    }, {
        value: '4x',
    },
    {
        value: '8x',
    },
    {
        value: '10x',
    }
]

export default class DropUpMenuTwo extends Component<{}> {
    constructor(props) {
        super(props)

        var options = []

        for (let i = 0; i < data.length; i++) {
            options.push(

                    <TouchableOpacity style={styles.speedRectangle} onPress={ () => this.handle_press(i,data[i].value)} >

                            <Text>
                                {data[i].value}
                            </Text>

                    </TouchableOpacity>

            )
        }
        this.state = {
            active: false,
            options_shown: options,
            current_selected: options[data.length-1]
        }
    }


    render() {
        return (
            <View>
                {this.state.current_selected}
            </View>
        )
    }
}

1 Ответ

0 голосов
/ 13 января 2020

Решением этой проблемы было использование TouchableOpacity из библиотеки 'Reaction-native-жест-обработчик'

...