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

相关推荐
小雨青年1 小时前
鸿蒙 HarmonyOS 6|ArkUI(03):状态管理
华为·harmonyos·1024程序员节
诚实可靠王大锤6 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
猫林老师11 小时前
HarmonyOS分布式数据库深度应用
harmonyos
LucianaiB13 小时前
【成长纪实】从“Hello World”到分布式实战的进阶之路
harmonyos·鸿蒙·成长纪实
万添裁14 小时前
基于ArkAnalyzer的HarmonyOS通用API多端安全性分析工具
harmonyos·ark
无风听海14 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
Bert丶seven14 小时前
鸿蒙Harmony实战开发教学(No.8)-Hyperlink超链接组件基础到进阶篇
华为·harmonyos·arkts·arkui·1024程序员节·开发教程
JohnnyDeng9416 小时前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
王嘉俊92516 小时前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节
俩毛豆17 小时前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos