React Native如何用javascript构建原生应用【教程】 返回列表

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 "useStat

e" 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 默认是换行，行为不一致是高频痛点。

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

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