React Native如何用javascript构建原生应用【教程】

14次阅读

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

React Native如何用javascript构建原生应用【教程】

react native 不是用 javascript “构建原生应用”,而是用 JavaScript(配合 React 语法)驱动原生 UI 组件。你写的 ViewTextScrollView 最终都映射到 iosUIView 或 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 默认是换行,行为不一致是高频痛点。

立即学习Java免费学习笔记(深入)”;

  • 统一行为要靠 returnKeyType + onSubmitEditing 组合:设 returnKeyType="send" 并监听 onSubmitEditing,而不是只靠 onKeyPress
  • Android 上 blurOnSubmit={false} 可能导致键盘不收起,尤其配合 multiline={true} 时,需手动 Keyboard.dismiss()
  • 如果用了第三方键盘(如搜狗、百度),部分机型可能忽略 returnKeyType,这时得监听 onEndEditing 做兜底

最易被忽略的是:React Native 的“原生”不等于“完全绕过 JS 线程”。所有 UI 更新仍经 JS 主线程调度,重度动画或密集计算不抽离到原生模块或 useMemo/useCallback 缓存,卡顿会立刻暴露。别只盯着组件能不能跑,得盯住 JS 帧率。

text=ZqhQzanResources