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

相关推荐
konh2 小时前
React Native 自定义字体导致 Text / TextInput 文本垂直不居中的终极解决方案
前端·react native
HMSCore3 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 — Notification Kit
harmonyos
HarmonyOS_SDK3 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 — Account Kit
harmonyos
ifeng09185 小时前
HarmonyOS功耗优化实战:减少冗余计算与传感器合理调用
pytorch·华为·harmonyos
爱笑的眼睛115 小时前
HarmonyOS WebSocket实时通信:从基础原理到复杂场景实践
华为·harmonyos
二流小码农9 小时前
鸿蒙开发:支持自定义组件的跑马灯
android·ios·harmonyos
2013编程爱好者11 小时前
【HUAWEI】HUAWEI Mate 70 Air详解
华为·harmonyos
爱笑的眼睛1115 小时前
HarmonyOS USB设备管理深度探索:从基础到高级应用
华为·harmonyos
爱笑的眼睛1117 小时前
HarmonyOS文件压缩与解压缩API深度解析与实践
华为·harmonyos
柒儿吖20 小时前
Qt for HarmonyOS 水平进度条组件开发实战
开发语言·qt·harmonyos