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>