Posts

Showing posts with the label React Native Chat

A New Collection of Thoughtful Learning Apps — Now Available on iOS & Android

Image
I’m excited to share a set of mobile apps I’ve recently completed and published on both the Google Play Store and the Apple App Store. These apps are designed with a simple goal in mind: to make meaningful, structured content more accessible, whether you’re studying theology or improving your English vocabulary. 📱 Now Available on Both Platforms All apps are live and available for download: Google Play Developer Page: https://play.google.com/store/apps/dev?id=5835943159853189043 Apple App Store Developer Page: https://apps.apple.com/ca/developer/q-z-l-corp/id1888794100 📖 Theology & Confession Study Apps For those interested in Reformed theology and classical Christian teachings, I’ve developed a series of apps that present foundational texts in a clean, focused reading format: The Belgic Confession Canons of Dort Heidelberg Catechism Westminster Shorter Catechism Each app is designed to provide a distraction-free experience, making it easier to read, reflect, and revisit these im...

React Native:键盘弹出时如何正确调整输入框位置(iOS & Android 实战)

Image
React Native:键盘弹出时如何正确调整输入框位置(iOS & Android 实战) 在开发聊天类应用(Chat UI)时,一个非常常见、但又容易踩坑的问题是: 当键盘弹出时,输入框被遮挡,或者整体布局错乱。 本文将结合一个真实的 React Native 聊天界面示例,详细说明: 如何在键盘弹出时自动上移输入框 为什么 KeyboardAvoidingView 是首选方案 iOS 和 Android 需要注意的差异和额外配置 一、核心思路:使用 KeyboardAvoidingView 在 React Native 中,官方推荐用于处理键盘遮挡问题的组件是: KeyboardAvoidingView 在本项目中,整个聊天页面被包裹在 KeyboardAvoidingView 中: <KeyboardAvoidingView style={styles.root} behavior="padding" keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80} > {/* Chat content */} </KeyboardAvoidingView> 这样做的好处是: 键盘弹出时,系统自动为内容腾出空间 输入框始终可见,不会被遮挡 无需手动监听 keyboard show / hide 事件 二、behavior 属性如何选择? KeyboardAvoidingView 的 behavior 决定了布局如何响应键盘: padding (推荐):通过增加底部 padding 上移内容 height :减少视图高度(Android 上偶尔会闪动) position :通过 position 调整(不稳定,较少使用) 在聊天类 UI 中, padding 是最稳定、体验最好的选择 。 三、keyboardVerticalOffset:为什么必须设置? 如果你的页面顶部有: 导航栏(Navigation Header) 自定义 Header S...