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

但是我无法访问Flatstrong项目或 MDropDownList 组件的TextInput。甚至我也无法集中 MDropDownList 中可用的TextInput。

请帮助我这里出了什么问题???

注意：此问题仅在android上，在ios上正常运行。在ios上，我可以单击“平面列表”项，也可以将TextInput聚焦。

Answer 1

尝试使用zIndex进入绝对视图？将zIndex : 500的属性添加到样式中。

无法在react-native android中访问绝对位置视图

1 个答案: