React native 键盘关闭时反应本机白色方块
我需要一点帮助。 我做了一个登记旅行的表格，很好用，很酷。但当我想使用键盘，然后将其关闭时，它会在页面底部留下一个空白（如下所示） 我真的不知道哪里出了问题。。。我想可能是ondropdownshow或ondropdownclose，但似乎不在那里。。。如果这对你来说很明显，我很抱歉，但我不知道该怎么做 谢谢你的时间和帮助React native 键盘关闭时反应本机白色方块,react-native,autocomplete,keyboard,dropdown,React Native,Autocomplete,Keyboard,Dropdown,我需要一点帮助。 我做了一个登记旅行的表格，很好用，很酷。但当我想使用键盘，然后将其关闭时，它会在页面底部留下一个空白（如下所示） 我真的不知道哪里出了问题。。。我想可能是ondropdownshow或ondropdownclose，但似乎不在那里。。。如果这对你来说很明显，我很抱歉，但我不知道该怎么做 谢谢你的时间和帮助 return ( <ImageBackground source={require("../../assets/images/b
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
centerComponent={{
text: i18n.t("tripsform.title").toUpperCase(),
style: styles.headerComponentStyle
}}
containerStyle={styles.headerContainerStyle}
statusBarProps={{ barStyle: "light-content" }}
/>
<View style={styles.container}>
<View style={styles.myForm}>
<View style={[styles.container, styles.autocompletesContainer]}>
<SafeAreaView
style={{
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 20
}}
>
{autocompletes.map(() => (
<Autocomplete
key={shortid.generate()}
containerStyle={{}}
inputStyle={{
borderColor: "transparent",
borderBottomColor: "#FFF",
width: 250,
fontFamily: "FunctionLH"
}}
placeholder={i18n.t("tripsform.action.departure")}
placeholderColor="#FFF"
scrollToInput={ev => {}}
handleSelectItem={(item, id) =>
this.handleSelectItemStart(item, id)
}
// onDropdownClose={() => onDropdownClose()}
onDropdownShow={() => onDropdownShow()}
pickerStyle={{ backgroundColor: "transparent" }}
fetchDataUrl={apiUrlWeeCoop+this.state.form.query_start}
initialValue={this.state.form.query_start}
minimumCharactersCount={2}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.properties}
/>
))}
<DatePicker
date={this.state.datetimeS}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
hideText={true}
showIcon={true}
onChange={datetime => {
this.setDateTimeS(datetime);
}}
/>
</SafeAreaView>
<SafeAreaView
style={{
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 20
}}
>
{autocompletes.map(() => (
<Autocomplete
key={shortid.generate()}
containerStyle={{}}
inputStyle={{
borderColor: "transparent",
borderBottomColor: "#FFF",
width: 250,
fontFamily: "FunctionLH"
}}
placeholder={i18n.t("tripsform.action.arrival")}
placeholderColor="#FFF"
scrollToInput={ev => {}}
handleSelectItem={(item, id) =>
this.handleSelectItemArrival(item, id)
}
onChange={() => onTripChange()}
onDropdownClose={() => onDropdownClose()}
onDropdownShow={() => onDropdownShow()}
pickerStyle={{ backgroundColor: "transparent" }}
fetchDataUrl={apiUrlWeeCoop+this.state.form.query_arrival}
initialValue={this.state.form.query_arrival}
minimumCharactersCount={2}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.properties}
/>
))}
<DatePicker
date={this.state.datetimeA}
mode="datetime"
format="YYYY-MM-DD HH:mm"
hideText={true}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={true}
onChange={datetime => {
this.setDateTimeA(datetime);
console.log("datetimeA");
}}
/>
</SafeAreaView>
</View>
<View style={styles.collapseScrollView}>
<TouchableOpacity onPress={this.toggleExpanded}>
<View style={styles.buttonView2}>
<View style={styles.touchable2}>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.plus")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</View>
</View>
</TouchableOpacity>
<Collapsible collapsed={this.state.collapsed} align="center">
<View style={styles.content}>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.family")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("family", val)}
/>
{/*<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.product")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("product", val)}
/>*/}
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.reference")}
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val =>
this.onChangeText("reference", val)
}
/>
<TextInput
style={styles.input}
placeholder="Description"
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("description", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.weight")}
autoCapitalize="none"
keyboardType = 'numeric'
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("weight", val)}
/>
{/*<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.packing")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("packing", val)}
/>*/}
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.dist")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("dist", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.type")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("type", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.plane")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("plane", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.sit")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("sit", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.price")}
autoCapitalize="none"
keyboardType = 'numeric'
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("price", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.company")}
autoCapitalize="none"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("company", val)}
/>
<TextInput
style={styles.input}
placeholder={i18n.t("tripsform.item.visit")}
autoCapitalize="none"
type="string"
placeholderTextColor="#fff"
onChangeText={val => this.onChangeText("visit", val)}
/>
</View>
</Collapsible>
</View>
</View>
{this.state.form_success == true ? (
<Text style={[styles.formMessage, styles.formMessageSuccess]}>
Succesfully...
</Text>
) : null}
{this.state.form_error.length > 0 ? (
<Text style={[styles.formMessage, styles.formMessageError]}>
{this.state.form_error}
</Text>
) : null}
<View style={styles.container}>
<TouchableOpacity
style={styles.touchable}
onPress={this.handleSubmit}
>
<View style={styles.view}>
<Text style={styles.textimg}>
{i18n.t("tripsform.action.add")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.touchable}
onPress={() => this.props.navigation.navigate("MyTrips")}
>
<View style={styles.view}>
<Text style={styles.textimg}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg}
/>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}
export default withKeyboardAwareScrollView(Options);
返回(
{autocompletes.map（（）=>(
{}}
handleSelectItem={（项目，id）=>
this.handleSelectItemStart（项，id）
}
//onDropdownClose={（）=>onDropdownClose（）}
onDropdownShow={（）=>onDropdownShow（）}
pickerStyle={{backgroundColor:“透明”}
fetchDataUrl={apirlWeeCoop+this.state.form.query\u start}
initialValue={this.state.form.query\u start}
MinimumCharacterScont={2}
高亮文本
valueExtractor={item=>item.name}
右内容
rightTextExtractor={item=>item.properties}
/>
))}
{
这个.setDateTimeS（datetime）；
}}
/>
{autocompletes.map（（）=>(
{}}
handleSelectItem={（项目，id）=>
此.handleSelectItemArrival（项目，id）
}
onChange={（）=>OnTipChange（）}
onDropdownClose={（）=>onDropdownClose（）}
onDropdownShow={（）=>onDropdownShow（）}
pickerStyle={{backgroundColor:“透明”}
fetchDataUrl={apirlWeeCoop+this.state.form.query\u-arrival}
initialValue={this.state.form.query\u-arrival}
MinimumCharacterScont={2}
高亮文本
valueExtractor={item=>item.name}
右内容
rightTextExtractor={item=>item.properties}
/>
))}
{
这个.setDateTimeA（datetime）；
console.log（“datetimeA”）；
}}
/>
{i18n.t（“tripsform.action.plus”）}
this.onChangeText（“family”，val）}
/>
{/*this.onChangeText（“product”，val）}
/>*/}
此.onChangeText（“参考”，val）
}
/>
this.onChangeText（“description”，val）}
/>
this.onChangeText（“weight”，val）}
/>
{/*this.onChangeText（“packing”，val）}
/>*/}
this.onChangeText（“dist”，val）}
/>
this.onChangeText（“type”，val）}
/>
this.onChangeText（“平面”，val）}
/>
this.onChangeText（“sit”，val）}
/>
this.onChangeText（“price，val）}
/>
this.onChangeText（“company”，val）}
/>
this.onChangeText（“visit”，val）}
/>
{this.state.form_success==true(
成功地。。。
)：null}
{this.state.form_error.length>0(
{this.state.form_error}
)：null}
{i18n.t（“tripsform.action.add”）}
this.props.navigation.navigate（“MyTrips”）}
>
{i18n.t（“tripsform.action.back”）}
);
}
}
使用KeyboardawarScrollView导出默认值（选项）；