为什么两种代码在本机代码中出现不同的行为？

Question

I write this two kinds of code, the first one it appear correct render, but the second is appear incorrect empty content render, I don't know why? Is there any one can explain the behavior?

First

import React from 'react'
import { Text } from 'react-native'

const Header = () => {
  return <Text style={style.header}>{content}</Text>;
}

const style = {
 header: {
  fontSize: 20
 }
}

const content = "content"

export { Header };

Second

import React from 'react'
import { Text } from 'react-native'

const Header = () => {
  return <Text style={style.header}>{content}</Text>;
}

const style = {
 header: {
  fontSize: 20
 }
}

const content = () => {
  return "content"
}

export { Header };

Answer 1

In the second case you're defining content as a function. You should call it:

  return <Text style={style.header}>{content()}</Text>;