React Native 用 JavaScript 驱动原生 UI 组件而非 WebView;useState 不可条件调用,须保持调用顺序;Android 图片需注意路径与格式;TextInput 回车行为需统一配置 returnKeyType 和 onSubmitEditing;UI 更新仍经 JS 线程,需优化帧率。

React Native 不是用 JavaScript “构建原生应用”,而是用 JavaScript(配合 React 语法)驱动原生 UI 组件。你写的 View、Text、ScrollView 最终都映射到 iOS 的 UIView 或 Android 的 View,不是 WebView 渲染的网页。
为什么 useState 在组件里不能放在条件语句里
这是 React 的规则,不是 React Native 特有,但新手常在平台判断逻辑中误用。比如写 if (Platform.OS === 'ios') { const [x, setX] = useState(0); } —— 这会直接报错 React Hook "useState" is called conditionally。
- Hook 调用必须严格遵循调用顺序,每次渲染都要以相同顺序执行
- 平台判断应放在 hook 调用之后,比如用
useEffect里区分逻辑,或把状态初始化逻辑抽成函数 - 需要差异化初始值?直接传入
useState(Platform.OS === 'ios' ? 10 : 8)
require('./icon.png') 在 Android 上不显示图片怎么办
React Native 的图片资源加载机制对路径和格式很敏感,Android 尤其容易出问题。
- 确保
icon.png放在项目根目录下(不是src/或assets/下就默认能认);如果放进了子目录,必须用相对路径如require('./assets/icon.png') - Android 不支持 WebP 格式(除非手动开启),也不支持带透明通道的 PNG 在某些旧版本上显示异常
- 调试时加
style={{ borderWidth: 1, borderColor: 'red' }}看容器是否渲染了——如果容器有边框但没图,基本是资源路径或格式问题 - 真机调试建议用
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle手动重打资源包再安装
如何让 TextInput 在 Android 上正确响应回车键
iOS 默认回车是“发送”,Android 默认是换行,行为不一致是高频痛点。
本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入,适合各层次PHP和MySQL开发人员阅读,既是优秀的学习教程,也可用作参考手册。
立即学习“Java免费学习笔记(深入)”;
- 统一行为要靠
returnKeyType+onSubmitEditing组合:设returnKeyType="send"并监听onSubmitEditing,而不是只靠onKeyPress - Android 上
blurOnSubmit={false}可能导致键盘不收起,尤其配合multiline={true}时,需手动Keyboard.dismiss() - 如果用了第三方键盘(如搜狗、百度),部分机型可能忽略
returnKeyType,这时得监听onEndEditing做兜底
最易被忽略的是:React Native 的“原生”不等于“完全绕过 JS 线程”。所有 UI 更新仍经 JS 主线程调度,重度动画或密集计算不抽离到原生模块或 useMemo/useCallback 缓存,卡顿会立刻暴露。别只盯着组件能不能跑,得盯住 JS 帧率。










