鸿蒙键盘遮挡react native内容尝试

import React, { useState } from 'react';

import { View, TextInput, Button, KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';

const FormScreen = () => {

const text, setText = useState('');

return (

<KeyboardAvoidingView

behavior={Platform.OS === 'ios' ? 'padding' : 'position'} // iOS 用 padding,Android 用 position

keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0} // iOS 中补偿导航栏高度

style={styles.container}

>

<View style={styles.innerContainer}>

<TextInput

placeholder="请输入内容"

value={text}

onChangeText={setText}

style={styles.input}

/>

<Button

title="提交"

onPress={() => console.log('提交内容:', text)}

/>

</View>

</KeyboardAvoidingView>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

},

innerContainer: {

flex: 1,

justifyContent: 'center',

padding: 20,

},

input: {

height: 40,

borderColor: '#ccc',

borderWidth: 1,

marginBottom: 20,

padding: 10,

},

});

export default FormScreen;

相关推荐
鸿蒙开发7 小时前
共享 Schema 与 SchemaFactory
前端·后端·harmonyos
二流小码农10 小时前
HarmonyOS开发助手,0代码让元服务从开发到上架
android·ios·harmonyos
贾伟康12 小时前
【共创稿事节】第一张服务卡片:2×2 今日菜谱的克制设计
microsoft·harmonyos·arkts·鸿蒙
2501_9445257612 小时前
开源鸿蒙平台 KMP_CMP 三方库「Atrium」适配全流程
microsoft·开源·harmonyos
less_1213812 小时前
鸿蒙 WPS Open SDK 二开复盘:从注册、打开到回传的完整能力链
服务器·sdk·harmonyos·wps·鸿蒙开发
2601_9495758613 小时前
开源鸿蒙平台 CMP 三方库「voyager」适配全流程
华为·开源·harmonyos
2601_9495758614 小时前
开源鸿蒙平台 CMP 三方库「compose-multiplatform-2048」适配全流程
华为·开源·harmonyos
2501_9481226315 小时前
Qs 跨端三方库仓颉适配全流程
python·react native·django·tornado
网络豆17 小时前
开源鸿蒙平台 CMP 三方库「kmp-compose-tab-container」适配全流程
华为·开源·harmonyos
2601_9495758617 小时前
开源鸿蒙平台 KMP_CMP 三方库「PreCompose」适配全流程
华为·开源·harmonyos