Я мог бы использовать небольшую помощь здесь. Я сделал форму для регистрации поездки, все работает, это круто. Но когда я хочу использовать клавиатуру, а затем отклонить ее, она оставляет пустое пространство внизу страницы (как вы можете видеть дальше)
Я действительно не понимаю, где это идет не так, как надо ... Я подумал, может быть, это было на dropdown show или ondropdownclose, но его там нет ... Извините, если это очевидно для вас, но я не знаю, что попробовать.
Спасибо за ваше время и помощь.
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);