React Native中如何在VS Code内读取iOS的info.plist配置变量并渲染

1. 读取info.plist配置值的实现方案 #

你当前直接导入info.plist的写法无法生效，因为info.plist是iOS原生层的配置文件，React Native的JS运行环境不支持直接导入解析该类原生文件，需要通过中间层读取。

这里推荐使用react-native-config库实现需求，全程不需要打开Xcode操作：

实现步骤 #

• 第一步：安装JS依赖
  在项目根目录终端执行命令：

npm install react-native-config --save
# 如使用yarn则执行 yarn add react-native-config

• 第二步：安装iOS原生依赖
  终端执行以下命令即可，无需打开Xcode：

cd ios && pod install && cd ../

• 第三步：JS层调用获取配置值
  修改你的组件代码如下：

import React from 'react';
import {StyleSheet, Text, View, SafeAreaView} from 'react-native';
import Config from 'react-native-config';

const Key = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>{Config.SERVICE_KEY}</Text>
      </View>
    </SafeAreaView>
  );
};

export default Key;

const styles = StyleSheet.create({});

注意事项 #

• 你当前info.plist中配置的键名为Service_Key，需要和目标变量名保持一致，或者直接修改为SERVICE_KEY避免大小写不匹配导致读取失败
• 每次修改配置值后需要重新执行npx react-native run-ios重启项目，热更新无法同步原生配置的改动
• 如果你不需要通过环境变量注入，只是想写死配置值，可以直接把info.plist中$(SERVICE_KEY)替换为你要的固定字符串比如Hello World即可
• 如果不想引入第三方依赖，也可以自行实现一个简单的原生桥接模块，暴露读取info.plist的方法给JS层，但该方案需要编写少量原生代码，相比之下react-native-config的方案更简单易维护

2. React Native开发学习资源推荐 #

• React Native官方文档：优先看基础入门、跨端通用API、调试章节，所有基础开发操作都可以在VS Code配合终端完成，不需要打开Xcode
• VS Code React Native生态插件教程：重点学习React Native Tools、ESLint、Prettier、Code Spell Checker这几个插件的使用，90%以上的开发调试工作都可以在VS Code内完成
• 社区RN实战项目教程：优先选择聚焦跨端业务实现、环境变量统一管理、热更新集成的内容，这类内容全程不需要操作Xcode即可落地

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