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

相关推荐
颜颜yan_2 分钟前
Eclipse Theia 鸿蒙 PC 适配全记录:在 HarmonyOS PC 上运行完整 IDE 工作台
ide·eclipse·harmonyos
鸽芷咕8 分钟前
Mu Editor 鸿蒙 PC 适配全记录:用 Qt 与嵌入式 CPython 重建教学型 Python IDE
python·qt·harmonyos
鸽芷咕13 分钟前
MongoDB 鸿蒙 PC 适配全记录:从 Bazel 交叉编译到 HNP 原生数据库服务
数据库·mongodb·harmonyos
安好说AI31 分钟前
Flutter for OpenHarmony 实战:媒体选择库 adaptive_image_picker 的鸿蒙化适配全解读
flutter·harmonyos·媒体
贾伟康1 小时前
【HarmonyOS 7新能力|011】分布式数字身份入门实战:从能力边界到最小可运行链路
harmonyos·arkts·隐私保护·数字身份·harmonyos 7
颜颜yan_1 小时前
Geany 鸿蒙 PC 适配全记录:以 Qt 重建轻量 IDE,打通编辑、项目检索与命令执行
ide·qt·harmonyos
●VON1 小时前
Flutter 鸿蒙插件适配实战:用 app_version_details 1.0.3 读取版本号与包名
flutter·华为·harmonyos
承渊政道1 小时前
PR-Agent鸿蒙PC适配全记录:从Python服务端代理到ArkTS原生评审客户端
python·华为·代理模式·agent·harmonyos·pc端
网络豆2 小时前
Apache Hive 鸿蒙 PC 适配全记录:以 Qt 客户端打通 HiveQL、监控与元数据访问
hive·apache·harmonyos
网络豆2 小时前
Apache HBase 鸿蒙 PC 适配全记录:用 Qt 原生客户端打通 REST 管理与数据读写
apache·hbase·harmonyos