Когда TextInput включен, клавиатура продолжает выдвигать содержимое и заголовок за пределы экрана, с компонентом KeyboardAvoidingView или без него, поведение одинаково.
Я попробовал следующее в манифесте:
android:windowSoftInputMode="adjustPan"
, когда я изменил вышеупомянутое значение на
android:windowSoftInputMode="adjustResize"
, оно работает нормально, заголовок не выдвигается, но он толкаетвсе виды, которые находятся под TextInput над клавиатурой, что нежелательно
android:windowSoftInputMode="adjustNothing"
, это не дает никакого эффекта, даже если я добавил компонент KeyboardAvoidingView
Мой код
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'never' }}>
<StatusBarPlaceHolder />
<StatusBar barStyle="light-content" hidden={false} backgroundColor="#A4395A" translucent={true} />
<Header title={'ارسال دعوة'} />
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ fontSize: 15, fontWeight: 'bold', textAlign: 'right', marginHorizontal: 15, marginTop: 5, fontFamily: Fonts.Cairo }}>نوع المناسبة</Text>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 5 }}>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgGe, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-General.png'))} >
<Image resizeMode='stretch' style={{ borderRadius: 5, height: height / 8, width: width / 6 }} source={require('../../assets/T-General.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgG, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Grad.png'))} >
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Grad.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgE, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Eng.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Eng.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgB, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Birthday.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Birthday.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgW, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Wedding.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Wedding.png')} />
</TouchableOpacity>
</View>
<KeyboardAvoidingView style={{flex:1}}>
<ScrollView style={{flex:1, backgroundColor: 'white' }} ref={scrollView => this.scrollView = scrollView}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5 }}>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >يوافق الهجري</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
value={this.state.dateH}
onChangeText={(value) => this.setState({ dateH: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'الهجري'} />
</View>
</View>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >التاريخ ميلادي</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<DatePicker
date={this.state.date}
mode="date"
placeholder="اختار التاريخ"
format="YYYY-MM-DD"
minDate="2019-1-1"
maxDate="2020-1-1"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
locale={"ar"}
customStyles={{
dateIcon: {
height: 0,
width: 0
},
dateInput: {
marginLeft: 45,
paddingBottom: 10,
borderWidth: 0,
}
// ../.. You can check the source to find the other keys.
}}
onDateChange={(date) => this.setDate(date)}
/>
</View>
</View>
</View>
<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5, marginTop: 5 }}>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >موقع المناسبة</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onChangeText={(value) => this.setState({ location: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'الشارع الحي'} />
</View>
</View>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >الداعي</Text>
<View style={{ flex: 1, padding: 8, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onChangeText={(value) => this.setState({ fromD: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'اسم الداعي'} />
</View>
</View>
</View>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >نص الدعوة</Text>
<View style={{ flex: 1, marginHorizontal: 10, marginTop: 5, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 90, animated: true }):null}
blurOnSubmit
onChangeText={(value) => this.setState({ body: value })}
style={{
flex: 1, paddingBottom: 7, height: height / 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'نتشرف بحضوركم لحفل تخرج ولدنا عثمان الصفادي'} />
</View>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >ملحاظات</Text>
<View style={{ flex: 1, alignItems: 'flex-end', marginHorizontal: 10, marginTop: 5, }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 195, animated: true }):null}
onChangeText={(value) => this.setState({ notes: value })}
style={{
width: width / 2, paddingHorizontal: 10,
paddingBottom: 7, height: height / 10,
textAlign: 'right', backgroundColor: '#F3F3F3', borderRadius: 5
}} placeholder={'ممنوع اصطحاب الاطفال..'} />
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.designCard()} style={{
justifyContent: 'center', width: width / 3, backgroundColor: '#753C4C', padding: 7,
borderTopLeftRadius: 5, borderBottomLeftRadius: 5, height: 45, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
}}>
<Text style={{ color: 'white', textAlign: 'center', fontSize: 18, fontFamily: Fonts.Cairo }}>تصميم كرت</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.takephoto()} style={{
justifyContent: 'center', borderTopRightRadius: 5, borderBottomRightRadius: 5,
backgroundColor: '#753C4C', height: 45, width: width / 3, padding: 7, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
}}>
<Text style={{ color: 'white', textAlign: 'center', fontFamily: Fonts.Cairo, fontSize: 18 }}>ادراج كرت</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>