React Native组件调用Alert时出现TransformError SyntaxError语法错误

错误原因 #

• 语法报错的直接原因是你在标签的JSX结构内直接编写Alert.alert()逻辑，没有用花括号{}包裹JavaScript代码，导致JSX解析器无法正确识别语法，解析到对象的text属性时触发报错。
• 即使补充了花括号，写法也不符合React组件规范：Alert.alert()是命令式调用API，没有返回合法的React渲染节点，直接写在return的JSX中会导致渲染失败，还会在组件每次渲染时自动触发弹窗，不符合功能预期。

修复方案 #

场景1：组件挂载时自动弹出提示框 #

使用useEffect钩子包裹弹窗逻辑，仅在组件挂载完成后触发：

import React, { useEffect } from 'react';
import { StyleSheet, View, Alert } from 'react-native';

export default function PhotoHandler() {
  useEffect(() => {
    Alert.alert(
      "Success",
      "Take photo",
      [
        { text: "Open Camera" }
      ]
    )
  }, [])

  return <View style={styles.container} />
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

场景2：点击交互时触发提示框 #

将弹窗逻辑放到事件回调函数中，绑定到对应交互组件上：

import React from 'react';
import { StyleSheet, View, Alert, Button } from 'react-native';

export default function PhotoHandler() {
  const handleShowAlert = () => {
    Alert.alert(
      "Success",
      "Take photo",
      [
        { text: "Open Camera" }
      ]
    )
  }

  return (
    <View style={styles.container}>
      <Button title="打开提示" onPress={handleShowAlert} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

内容的提问来源于stack exchange，提问作者Meana