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

Reactjs ScrollView不允许我从组件下拉列表中选择,reactjs,react-native,user-interface,components,scrollview,Reactjs,React Native,User Interface,Components,Scrollview,首先,让我与大家分享我的代码,以及我目前的成果 return( <DismissKeyBoard> <View> <Formik initialValues ={{user: 'User ', place: '', description: '', comments: '',datePosted: new Date(), location: '', eventDate: ''}} o

首先,让我与大家分享我的代码,以及我目前的成果

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时,我可以看到位置列表,但当我点击任何找到的位置时,它将不接受输入

观察

当不在ScrollView中时,我看不到建议。 当不在任何其他范围内时,它工作得非常好。 警告

通过上面的代码,我还得到了这样一条警告消息:VirtualizedList不应嵌套在相同方向的纯滚动视图中-请改用另一个VirtualizedList支持的容器

期望结果

我希望组件显示在表单顶部,没有任何奇怪的错误,其功能正常工作。最好如图所示

编辑

我正在从'react native google places autocomplete'导入导入导入{GooglePlacesSautoComplete};从

我不是GUI方面的专家,如能提供解释,我们将不胜感激和欢迎。如果需要更多信息,我将非常乐意提供


先谢谢你

所以我面临同样的问题,帮助我解决这个问题的一件事就是添加 keyboardShouldPersistTaps={true}作为道具在中

这是我的代码片段

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

所以我面临着同样的问题,帮助我解决这个问题的一件事就是添加 keyboardShouldPersistTaps={true}作为道具在中

这是我的代码片段

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