鸿蒙键盘遮挡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 小时前
鸿蒙学习实战之路-蓝牙设置完全指南
学习·华为·harmonyos
Van_Moonlight8 小时前
RN for OpenHarmony 实战 TodoList 项目:加载状态 Loading
javascript·开源·harmonyos
Van_captain10 小时前
rn_for_openharmony常用组件_Divider分割线
javascript·开源·harmonyos
cn_mengbei12 小时前
鸿蒙PC原生应用开发实战:ArkTS与DevEco Studio从零构建跨端桌面应用全栈指南
华为·wpf·harmonyos
前端不太难14 小时前
从本地到多端:HarmonyOS 分布式数据管理实战详解
分布式·状态模式·harmonyos
行者9614 小时前
Flutter适配OpenHarmony:国际化i18n实现中的常见陷阱与解决方案
开发语言·javascript·flutter·harmonyos·鸿蒙
cn_mengbei15 小时前
鸿蒙PC开发实战:Qt环境搭建保姆级教程与常见问题避坑指南(HarmonyOS 4.0+DevEco Studio 3.1最新版)
qt·华为·harmonyos
特立独行的猫a15 小时前
[鸿蒙PC命令行程序移植]:移植axel多线程高速下载工具踩坑记
华为·harmonyos·移植·鸿蒙pc·axel
Van_Moonlight16 小时前
RN for OpenHarmony 实战 TodoList 项目:任务完成进度条
javascript·开源·harmonyos
墨狂之逸才16 小时前
React Native Hooks 快速参考卡
react native