如何在父容器外部保持可触摸元素可按下

Question

我正在尝试创建一个与下拉菜单相反的下拉菜单。该对象具有折叠的 'inactive' 状态和菜单向上扩展（见右图）显示所有选项的 'active' 状态。包含“1x”、“2x”的可触摸不透明元素然而由于某种原因在菜单展开时变得无法按下。父视图中包含的菜单选项是可按下的（预期功能）。我希望包含在父级（主栏中的栏）之外的元素也可以按下。出于某种原因，此问题仅存在于应用程序的 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'
    }
});

下拉菜单代码

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>
        )
    }
}

Answer 1

这个问题的解决方案是使用 'react-native-gesture-handler' 库中的 TouchableOpacity

如何在父容器外部保持可触摸元素可按下

How to keep touchable elements pressable when outside parent container

javascript

react-native

react-native-android