React Native中.env变量无法用于GooglePlacesAutoComplete的key属性

传参失败核心是两个写法错误：

1. 读取环境变量的代码存在语法错误，方括号内的键名缺失前引号，存在解析隐患
2. 给组件传入key参数时多嵌套了一层大括号，实际传入的是一个对象而非字符串，和你硬编码传入的字符串类型不匹配，组件自然无法识别

• 首先修正.env文件的配置，去掉等号两侧的空格，避免部分env解析工具把空格识别为键/值的一部分：

GOOGLE_PLACES_API=12345

如果你是Expo项目，客户端可读取的环境变量需要加EXPO_PUBLIC_前缀，要写成EXPO_PUBLIC_GOOGLE_PLACES_API=12345

• 修正环境变量读取的写法，不要写残缺的语法：

// 普通React Native搭配react-native-dotenv等环境变量库的写法
const GOOGLE_PLACES_API = process.env.GOOGLE_PLACES_API;

// Expo项目对应写法
// const GOOGLE_PLACES_API = process.env.EXPO_PUBLIC_GOOGLE_PLACES_API;

• 修正组件传参的写法，去掉key值外面多余的大括号，直接传入字符串变量即可：

<GooglePlacesAutoComplete 
  query={{ key: GOOGLE_PLACES_API }}
/>

你之前在<Text>组件里能正常显示值，是因为{GOOGLE_PLACES_API}写在JSX的插值语法里，直接输出了变量存储的字符串内容。但在query={{ key: {GOOGLE_PLACES_API} }}这段代码里，外层的{}已经是JSX插值标识，内层的{ key: xxx }是普通JavaScript对象，此时你给key赋值的{GOOGLE_PLACES_API}会被JS解析为{ GOOGLE_PLACES_API: "12345" }这样一个对象，和你硬编码传入的字符串"12345"类型完全不同，组件拿不到正确的key值自然无法工作。

如果修完仍有异常，可以加一行日志校验变量类型和值是否符合预期：

console.log(typeof GOOGLE_PLACES_API, GOOGLE_PLACES_API)
// 正确输出应该是 string 12345

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