如何在React Native中定义存储无参数JSX代码的常量

你编写的代码无法运行的核心原因是语法错误：你没有为常量声明箭头函数标识，JS引擎会将=后的大括号识别为对象字面量，而非函数体，遇到return关键字就会直接抛出语法异常。

两种无需传参的实现方案 #

方案1：无参数函数组件（和官方Section写法逻辑一致） #

这种写法属于标准React函数组件，支持内部使用Hooks、添加自定义逻辑，复用性更强，符合React编码规范：

// 注意：React自定义组件名必须首字母大写
const Header = () => {
  // 可在此处添加内部逻辑、调用Hooks，比如判断深色模式、绑定状态等
  return (
    <View>
      <Image source={require('./Images/img.png')}/>
    </View>
  );
};

调用方式：直接在需要渲染的位置写<Header />即可，不需要传入任何参数。

方案2：静态JSX常量 #

如果这个UI片段完全没有动态逻辑，不需要使用Hooks、也不需要后续更新，可以直接把JSX赋值给常量，不需要封装为函数：

const header = (
  <View>
    <Image source={require('./Images/img.png')}/>
  </View>
);

调用方式：直接在需要渲染的位置写{header}即可。

注意事项 #

• 函数组件写法必须保证组件名首字母大写，否则React会将其识别为原生内置组件，无法正常渲染你定义的内容
• 静态JSX常量一旦定义就无法动态更新，仅适合完全固定的UI片段

内容的提问来源于stack exchange，提问作者Greg W.F.R