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

相关推荐
FrameNotWork11 小时前
HarmonyOS三方库:lv-markdown-in 技术解析与自定义语法扩展实战
华为·harmonyos
条tiao条12 小时前
鸿蒙 ArkTS 实战进阶:从核心组件到面向对象编程一篇通
华为·harmonyos
不羁的木木15 小时前
HarmonyOS文件基础服务(Core File Kit)实战演练02-环境搭建与基础配置
华为·harmonyos
不羁的木木15 小时前
ArkWeb实战学习笔记04-JavaScript与Native通信
笔记·学习·harmonyos
Goway_Hui15 小时前
【 鸿蒙原生应用开发--ArkUI--005 】PomodoroApp 番茄钟应用开发教程
华为·harmonyos
Goway_Hui15 小时前
【鸿蒙原生应用开发--ArkUI--004】NotesApp - 笔记应用教程
harmonyos
想你依然心痛16 小时前
HarmonyOS 6(API 23)智能体驱动的沉浸式AR深海科考探索舱
华为·ar·harmonyos·智能体
Goway_Hui16 小时前
【鸿蒙原生应用开发--ArkUI--002】CalculatorApp - 计算器应用教程
华为·harmonyos