android - React Native Keyboard 推送标题(Android)

Question

当 TextInput 处于 onFocus 状态时，无论是否使用 KeyboardAvoidingView 组件，键盘都会将内容和标题推到屏幕外，行为是相同的。

我在 list 中尝试了以下内容:

android:windowSoftInputMode="adjustPan"

当我把上面的改成

android:windowSoftInputMode="adjustResize"

它工作正常，标题没有被推送，但它推送了在键盘上方的 TextInput 下找到的所有 View ，这是不需要的

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>

Answer 1

尝试

<KeyboardAvoidingView behavior='padding'>