無法在react-native android中訪問絕對位置視圖

Question

我有一個名為MDropDowlList的組件，該組件呈現以下視圖：

MDropDownList.js

render() {
    return (
        <View>
            <View
                style={{
                    backgroundColor: '#fff',
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: 0,
                    maxHeight: 200,
                }}
            >
                {
                    this.props.searchable && (
                        <TextInput
                            style={{ zIndex: 198 }}
                            onChangeText={(text) => this.search(text)}
                        />
                    )
                }
                <FlatList
                    data={this.state.data}
                    keyboardShouldPersistTaps="always"
                    nestedScrollEnabled={true}
                    contentContainerStyle={{ zIndex: 199 }}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                        <TouchableHighlight
                            key={index.toString()}
                            style={{
                                padding: 10,
                                backgroundColor: '#fff',
                            }}
                            underlayColor="#5897fb"
                            onPress={() => this.props.handleOnPress(item)}
                        >
                            <MText size={18}>{item}</MText>
                        </TouchableHighlight>
                    )}
                />
            </View>
        </View>
    );
}

然后，我將此組件稱為另一個名為MDropDown的組件，其渲染方法如下：

MDropDown.js

render() {
    return (
        <View style={{ marginVertical: 5, zIndex: 3}}>

            ...
            {/* Another components */}
            ...

            {
                this.state.displayDropDown && (
                    <MDropDownList data={this.props.data} searchable={this.props.searchable} handleOnPress={(item) => this.handleOnPress(item)} />
                )
            }

        </View>
    );
}

現在，終於在主屏幕中按如下所示調用了MDropDown組件：

render() {
    return (
        <KeyboardAvoidingView style={{ flex: 1, backgroundColor: Colors.bgGray }} behavior="padding">
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.container} keyboardShouldPersistTaps="always" nestedScrollEnabled={true}>
                <View style={{ backgroundColor: '#fff', padding: 10 }}>
                    <MDropDown
                        label="Category"
                        placeholder="Select Category"
                        data={["test1", "test2", "test3", "test4", "test5"]}
                        onSelectItem={(selectedItem) => alert(selectedItem)}
                        searchable={true}
                    />
                </View>
            </ScrollView>
        </KeyboardAvoidingView>
    )
}

但是我無法訪問Flatrop項目或MDropDownList組件的TextInput。 甚至我也無法集中於MDropDownList中可用的TextInput。

請幫助我這里出了什么問題???

注意：此問題僅在android上有效，在ios上正常運行。 在ios上，我可以單擊“平面列表”項，也可以將TextInput聚焦。

Answer 1

嘗試使用zIndex到絕對視圖？ 將zIndex : 500屬性zIndex : 500添加到樣式。