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

相关推荐
爱笑的眼睛113 小时前
深入解析HarmonyOS ArkTS:从语法特性到实战应用
华为·harmonyos
安卓开发者5 小时前
鸿蒙NEXT SSAP连接与数据传输实战:轻松实现跨设备通信
华为·harmonyos
安卓开发者11 小时前
在鸿蒙NEXT中使用WebSocket实现实时网络通信
websocket·华为·harmonyos
Winson℡21 小时前
React Native 中的 useCallback
javascript·react native·react.js
fruge1 天前
提升 HarmonyOS 开发效率:DevEco Studio 6.0 热更新调试模式全指南
华为·harmonyos
2501_919749031 天前
鸿蒙:使用Image组件展示相册图片或rawfile图片
华为·harmonyos
2501_919749031 天前
鸿蒙:PersistenceV2页面间持久化存储数据
华为·harmonyos
一尘之中2 天前
操作系统内核架构深度解析:从单内核、微内核到鸿蒙分布式设计
架构·harmonyos·ai写作
咕噜企业签名分发-淼淼2 天前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos