android - React Native Keyboard 推送标题(Android)
问题描述
当 TextInput 处于 onFocus 时,键盘会不断地将内容和标题推送到屏幕外,无论有没有 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>
解决方案
尝试
<KeyboardAvoidingView behavior='padding'>
推荐阅读
- python - 排名不重复
- apache-flink - flink k8s ha 出现错误。作业 00000000000000000000000000000000 不是处于 RUNNING 状态而是 SCHEDULED 状态。中止检查点
- firebase - Firestore - 使用数据分页缓存行为
- python - 如何只选择关键字?
- bash - Shell 脚本变量中未捕获计数
- r - 如何在 R 中创建一个在 X 轴上有多个图层的条形图
- javascript - 在 TestCafe 中运行时如何允许所有浏览器重定向
- reactjs - 使用带有样式组件的材料系统的更好方法
- sql-server - 附带计划的 SQL Server 2016 运行缓慢的过程
- python - 熊猫。如何从数据框列表中调用数据框?