鸿蒙键盘遮挡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;

相关推荐
前端不太难4 分钟前
State 驱动鸿蒙游戏架构详解
游戏·架构·harmonyos
见山是山-见水是水7 小时前
鸿蒙flutter第三方库适配 - 读书笔记
flutter·华为·harmonyos
Utopia^8 小时前
鸿蒙flutter第三方库适配 - 图片压缩工具
flutter·华为·harmonyos
SoraLuna9 小时前
「鸿蒙智能体实战记录 11」年俗文化展示卡片开发与多段内容结构化呈现实现
华为·harmonyos
Ww.xh9 小时前
OpenHarmony API8升API9:权限与接口变更实战指南
harmonyos
梁山好汉(Ls_man)11 小时前
鸿蒙_自定义组件包含多个引用自定义构建函数@BuilderParam时的用法
华为·harmonyos·鸿蒙·arkui
见山是山-见水是水11 小时前
鸿蒙flutter第三方库适配 - 车辆管理
flutter·华为·harmonyos
Utopia^13 小时前
鸿蒙flutter第三方库适配 - 番茄钟专注
flutter·华为·harmonyos
阿健君14 小时前
Harmony NDK 开发
harmonyos
UnicornDev15 小时前
【HarmonyOS 6】鸿蒙原生应用智能体接入
华为·harmonyos·arkts·鸿蒙·鸿蒙系统