response-native-autocomplete-input Может выбрать только первый вариант в раскрывающемся списке android - PullRequest
0 голосов
/ 08 января 2020

На моем телефоне android я могу выбрать только первый вариант в списке автозаполнения. На моем iPhone он работает как положено. Список фильтруется по мере того, как я набираю текст, но независимо от того, какой будет первый параметр после фильтрации, я могу выбрать только первый вариант в списке. Я попытался добавить "console.log" к touchables в списке, чтобы посмотреть, регистрируют ли другие опции событие touch, и нет. Не отдавая слишком много моего кода, это выглядит следующим образом:

<ScrollView contentContainerStyle={[formStyles.container]} scrollEventThrottle={64} keyboardDismissMode="on-drag" onScroll={() => { if(!this.state.hideResults){this.setState({hideResults:true})}}}>
                <KeyboardAvoidingView behavior={"padding"}>
                    <View style={AddViewInviteeStyles.inviteeInputMainView}>
                            <Text style={AddViewInviteeStyles.inviteeInputInstructionText}>{this.state.contactsRetrieved ? retrievedContactText : noRetrievedContactText}</Text>
                            <View style={[AddViewInviteeStyles.inviteeInputAutocompleteView]}>
                                <AutoComplete style={[AddViewInviteeStyles.inviteeInputAutocomplete, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]}
                                    data={this.state.contacts}
                                    value={typeof this.state.invitee === "string" ? this.state.invitee : this.state.invitee.name}
                                    containerStyle={[textStyles.container, {width: textStyles.textboxes.width}]}
                                    placeholder={"Invite someone"}
                                    placeholderTextColor={textStyles.datePickerTextStyle.color}
                                    ref={(ref) => this.inviteeControl = ref}
                                    hideResults={this.state.hideResults}
                                    inputContainerStyle={[textStyles.container, {width: '100%', borderWidth: 0}]}
                                    onChangeText={(text) => { 
                                        this.setState({ invitee: text });
                                        if(this.state.invalidContact){
                                            this.validateContact();
                                        }
                                        this.filterContacts(text);
                                    }}
                                    renderItem={({ item, i }) => (
                                        <TouchableOpacity  onPress={() => {this.setState({ invitee: item, hideResults:true, invalidContact: false })}} style={[{width: "100%"}, i > 0 ? {marginTop: 10} : {}]}>
                                            <Text numberOfLines={1} ellipsizeMode={"tail"} style={{fontSize: responsiveFontSize(2)}}>{item.name}</Text>
                                        </TouchableOpacity>
                                    )}
                                    listStyle={[{width: '100%', position: 'relative'}]}
                                    keyExtractor={(item, i) => {return i +""}}
                                    listContainerStyle={[textStyles.container, {width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%', ''))), position:'absolute', left: 0, top: textStyles.textboxes.height, justifyContent: 'center', alignItems: 'center', zIndex:300}]}
                                    autoFocus={true}
                                    blurOnSubmit={false}
                                    underlineColorAndroid='transparent'
                                    />
                                <TouchableOpacity activeOpacity={1} style={[{width: this.state.addNewInvitee ? '10%':'20%', ...Util.filterObject(textStyles.textboxes, ["width", "minWidth"])}, !this.state.addNewInvitee? textStyles.lastTextBoxInFirstRow : {}, !this.state.addNewInvitee? textStyles.lastTextBoxInLastRow : {}, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]} onPress={this.addInvitee.bind(this)}>
                                    {!this.state.invalidContact ? <Text style={[{fontSize: this.state.addNewInvitee ? responsiveFontSize(3) : responsiveFontSize(4), alignContent: 'center', justifyContent: 'center', textAlign:'center', textAlignVertical: 'center', marginTop: this.state.addNewInvitee? 11: 5}, this.state.addNewInvitee ? {marginRight: 2} : {}]}><Emoji name={"heavy_plus_sign"} /></Text> : null}  
                                </TouchableOpacity>
                                {this.state.addNewInvitee ? addNewInviteeCancelBtn : null}
                            </View>
                            {this.state.invalidContact ? invalidInviteeText : null}
                        </View>

                </KeyboardAvoidingView>
            </ScrollView>

const AddViewInviteeStyles = StyleSheet.create({
    inviteeInputMainView: {
        alignItems: 'center', 
        marginTop: 40, 
        marginBottom: 20
    },
    inviteeInputInstructionText: {
        ...textStyles.requiredNotice, 
        ...textStyles.notifyTextStyle, 
        fontSize: responsiveFontSize(2),
        ...Platform.select({
            android:{
                width: responsiveWidth(90)
            }
        })
    },
    inviteeInputAutocompleteView:{
        ...textStyles.container, 
        flexDirection: 'row',
        ...Platform.select({
            android: {
                width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%' , ''))),
            },
            ios:{
                width: textStyles.textboxes.width
            }
        })
    },
    inviteeInputAutocomplete: {
        ...textStyles.textboxes,
        ...textStyles.firstTextBoxInFirstRow, 
        ...textStyles.firstTextBoxInLastRow,
        width: '100%'
    }

});

const formStyles = StyleSheet.create({
    container: {
        ...appStyles.container,
        flexGrow: 1,
        width: '100%',
    }
});

const appStyles = StyleSheet.create({
    container: {
        backgroundColor: '#e9dec2',
    }
});

const textStyles = StyleSheet.create({
    container: {
        alignItems: 'center',
    },
    textboxes: {
        color: '#3c3b5f',
        backgroundColor: '#F0F8FF',
        width: '80%',
        paddingLeft: 5,
        paddingRight: 2,
        minHeight: 35,
        height: 50,
        borderBottomColor: '#fbdd07',
        borderBottomWidth: 1,
    },
    requiredNotice: {
        color: 'grey',
        fontSize: 13,
        marginTop: 70,
    },
    firstTextBox: {
        marginTop: 70,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8
    },
    firstTextBoxInFirstRow: {
        borderTopLeftRadius: 8,
    },
    lastTextBoxInFirstRow: {
        borderTopRightRadius: 8,
    },
    firstTextBoxWithNotice: {
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8

    },
    textBoxInRow: {
        borderRightWidth: 1,
        borderBottomColor: '#fbdd07',
        //borderRightColor: '#fbdd07'
    },
    notifyTextStyle: { 
        marginTop: '7%', 
        fontSize: responsiveFontSize(4), 
        fontWeight: "300"
    }

})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...