ScrollView 不允许我从组件下拉列表中进行选择

Posted 2023-02-23

【中文标题】ScrollView 不允许我从组件下拉列表中进行选择

【英文标题】：ScrollView not allowing me to select from Component dropdown

【发布时间】：2020-08-12 00:35:43

【问题描述】：

首先，让我分享一下我的代码以及我所做的当前结果。

return(
    <DismissKeyBoard>
    <View>   
       <Formik
            initialValues =user: 'User ', place: '', description: '', comments: '',datePosted: new Date(), location: '', eventDate: ''
            onSubmit =logInfo>
            props =>(
                <SafeAreaView style=styles.container>
                <ScrollView>
                <View style=styles.form>    

                <Text  style=styles.text>Pick a place for the event</Text>

                <GooglePlacesAutocomplete
                         placeholder='Insert place to find'
                         minLength=2
                         keyboardAppearance='light'
                         fetchDetails=false 
                         onPress=(data, details = null) =>  // 'details' is provided when fetchDetails = true
                             props.values.location= data.description
                                 console.log("hello",props.values.location);
                                

                            styles=
                            textInputContainer: 
                                backgroundColor: 'rgba(0,0,0,0)',
                                borderTopWidth: 0,
                                borderBottomWidth:0,
                                width: '100%',
                                ,
                             textInput: 
                                fontSize: 16
                                ,
                             predefinedPlacesDescription: 
                                color: '#1faadb',
                                height:'100%',
                                ,
                            

                            query=
                                key: '',
                                language: 'en', // language of the results
                              

                        />


                   <View style=styles.container>    
                    <Text
                        placeholder= props.values.user
                        onChangeText = props.handleChange('user')
                        values = props.values.user 
                        style=styles.text>props.values.user</Text>
                    <TextInput
                        placeholder= 'Place (e.g Honolulu)'
                        onChangeText = props.handleChange('place')
                        values = props.values.place 
                        style=styles.text/>
                    <TextInput
                        placeholder= 'Description (e.g This is located...)'
                        onChangeText = props.handleChange('description')
                        values = props.values.description 
                        style=styles.text/>
                    <TextInput
                        placeholder= 'Comment (e.g This is fun because...)'
                        onChangeText = props.handleChange('comments')
                        values = props.values.comments 
                        style=styles.text/>
                    <Text  style=styles.text >Pick a date for the event</Text>
                    <DatePicker
                        date=props.values.eventDate
                        onDateChange=(date) => props.values.eventDate= date
                        values = props.values.eventDate />
                    /* <Text  style=styles.text>Location</Text> */

                    <View  style=styles.viewbtn>
                        <TouchableOpacity onPress=props.handleSubmit style=styles.btn ><Text style=styles.txtbtn >Submit</Text></TouchableOpacity>
                        /* <Button title="Submit" onPress=props.handleSubmit  /> */
                    </View>

                    </View>    

            </View>
            </ScrollView>
            </SafeAreaView>

            )
        </Formik> 
    </View>      
    </DismissKeyBoard>           
    )


const styles = StyleSheet.create(
    container:
       // flex:1,
        paddingTop:20,
      //  margin: 10,
        alignItems: 'center'
    ,
    // form:
    //     alignItems: 'flex-start',
    //     paddingTop:40,

    // ,
    text:
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderColor: 'black',
        paddingTop:15, 
    ,
    viewbtn:
        paddingTop:15,
    ,
    btn:
        backgroundColor: 'purple',
        padding:20,
        margin:20,
        width: 100,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius : 5,
    ,
    txtbtn:
        fontWeight: 'bold',
        fontSize: 14,
        color: 'orange'
    ,
)

问题

当我点击 GooglePlacesAutoComplete 时，我可以看到地点列表，但是当我点击任何找到的地点时，它不会接受输入。

观察

当 <GooglePlacesAutocomplete /> 不在 ScrollView 中时，我看不到建议。 当<GooglePlacesAutocomplete /> 不在任何其他<View></View> 中时，它可以正常工作。

警告

使用上面的代码，我还会收到这条警告消息“VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizedList-backed 容器。”

期望的结果

我希望<GooglePlacesAutocomplete /> 组件显示在表单顶部，没有任何奇怪的错误并且其功能正常工作。 （最好如图所示）

编辑

我正在从https://github.com/FaridSafi/react-native-google-places-autocomplete 导入import GooglePlacesAutocomplete from 'react-native-google-places-autocomplete';

我不是 GUI 专家，非常感谢和欢迎解释。如果需要更多信息，我将非常乐意提供。

提前谢谢你。

【参考方案1】：

所以我遇到了同样的问题，而帮助我解决问题的一件事是添加 keyboardShouldPersistTaps=true 在 <ScrollView> 中作为道具。

这是我的代码 sn-p。

<ScrollView keyboardShouldPersistTaps=true> 
      <SelectionDD studentstatus=studentStatus/>
      <SearchableDD collegeNames=collegeNames placeholder='University'/>
</ScrollView>