react-native-config 使用

  • 源代码名称:react-native-config
  • 源代码网址:http://www.github.com/luggit/react-native-config
  • react-native-config源代码文档
  • react-native-config源代码下载
  • Git URL:

    复制代码

    git://www.github.com/luggit/react-native-config.git
    Git Clone代码到本地:

    复制代码

    git clone http://www.github.com/luggit/react-native-config
    Subversion代码到本地:

    复制代码

    $ svn co --depth empty http://www.github.com/luggit/react-native-config
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    用于响应本机应用程序的配置变量

    模块将配置变量公开到你的javascript代码中,同时支持iOS和 Android。

    带来一些 12因子,喜欢你的移动应用 !

    用法

    创建一个新的文件 .env 在你的React本机应用程序的root 中:

    复制代码

    
    API_URL=https://myapi.com
    
    
    GOOGLE_MAPS_API_KEY=abcdefgh
    
    
    

    然后从你的应用程序中访问定义的变量:

    复制代码

    importConfigfrom'react-native-config'Config.API_URL// 'https://myapi.com'Config.GOOGLE_MAPS_API_KEY// 'abcdefgh'

    记住这个 MODULE 不会混淆或者加密打包密钥,因此不会在 .env 中存储敏感密钥。 基本上,阻止用户从移动应用软件中逆向工程是不可能的,所以设计你的应用程序( 和 api ) 是。

    Android

    .env 中设置的配置变量通过 BuildConfig 可以用于你的Java类:

    复制代码

    publicHttpURLConnection getApiClient() {
     URL url =newURL(BuildConfig.API_URL);
     //.. .}

    你还可以从Gradle配置中读取它们:

    复制代码

    defaultConfig {
     applicationId project.env.get("APP_ID")
    }

    使用它们来配置 AndroidManifest.xml 中的库和其他库:

    复制代码

    <meta-dataandroid:name="com.google.android.geo.API_KEY"android:value="@string/GOOGLE_MAPS_API_KEY"/>

    所有变量都是字符串,因此你可能需要将它们转换为。 例如在Gradle中:

    复制代码

    
    versionCode project.env.get("VERSION_CODE").toInteger()
    
    
    

    同样,记住存储在 .env 中的变量与代码一起发布,所以不会像你的应用程序那样放置任何敏感的东西。

    iOS

    从 Obj-C 类中读取在 .env 中声明的变量,例如:

    复制代码

    // import header#import"ReactNativeConfig.h"// then read individual keys like:NSString *apiUrl = [ReactNativeConfig envFor:@"API_URL"];// or just fetch the whole configNSDictionary *config = [ReactNativeConfig env];

    它们还可以在 Info.plist 中配置,通过将 __RN_CONFIG_ 设置为它的名称:

    复制代码

    
    __RN_CONFIG_API_URL
    
    
    

    注意:需要特定设置( 请参见下面),并且在更改值以查看更新后的值之后需要一个 Product> Clean

    不同的环境

    保存不同文件中不同环境的配置: .env.staging.env.production 等。

    默认react-native-config将从 .env 读取,但你可以在构建或者发布应用程序时更改它。

    最简单的方法是告诉它要使用环境变量读取什么文件,例如:

    复制代码

    
    $ ENVFILE=.env.staging react-native run-ios # bash
    
    
    $ SET ENVFILE='.env.staging' && react-native run-ios # windows
    
    
    $ env:ENVFILE=".env.staging"; react-native run-ios # powershell
    
    
    

    这也适用于 run-android。 或者,下面有一些特定于平台的选项。

    Android

    可以使用相同的环境变量来组合具有不同配置的发行版:

    复制代码

    
    $ cd android && ENVFILE=.env.staging./gradlew assembleRelease
    
    
    

    或者,可以在 build.gradle 中定义与env文件关联的映射。 在 apply from 调用之前执行,并在 lowercase 中使用生成案例,例如:

    复制代码

    
    project.ext.envConfigFiles = [
    
    
     debug:".env.development",
    
    
     release:".env.production",
    
    
     anothercustombuild:".env",
    
    
    ]
    
    
    
    apply from: project(':react-native-config').projectDir.getPath() +"/dotenv.gradle"
    
    
    
    iOS

    iOS的基本思想是每个环境文件都有一个方案,所以你可以轻松地在它们之间进行替换。

    首先创建一个新方案:

    • 在Xcode菜单中,转到产品> 方案> 编辑方案
    • 单击底部的重复方案
    • 在左上角给它一个适当的NAME。 例如:"myapp ( 回写)"

    然后编辑新创建的方案,使它的使用不同的env文件。 从同一个"管理方案"窗口中:

    • 展开左侧的"生成"设置
    • 单击"预操作",并在加号下选择"新运行脚本 Action"
    • 其中显示"键入脚本或者拖动脚本文件",键入:

      复制代码

      
      echo".env.staging">/tmp/envfile # replace. env.staging for your file
      
      
      

    这仍然有点实验和脏- 让我们知道如何使iOS使用不同的配置打开请求或者问题。

    设置

    安装软件包:

    复制代码

    
    $ yarn add react-native-config
    
    
    

    链接库:

    复制代码

    
    $ react-native link react-native-config
    
    
    

    :Android的额外步骤

    你还需要手动将一个插件应用到你的应用程序,从 android/app/build.gradle:

    复制代码

    
    //2nd line, add a new apply:
    
    
    apply from: project(':react-native-config').projectDir.getPath() +"/dotenv.gradle"
    
    
    

    iOS支持 Info.plist的额外步骤

    • 转到你的项目-> 生成设置->
    • 搜索preprocess预处理""
    • 将 Preprocess Info.plist File 设置为 Yes
    • 集合集 Info.plist Preprocessor Prefix File 到 ${BUILD_DIR}/GeneratedInfoPlistDotEnv.h
    • 集合集 Info.plist Other Preprocessor Flags 到 -traditional
    • 如果未看到这些设置,请验证在顶部( 而不是"基础"选择了"全部"。
    高级Android安装

    如果使用 android/app/build.gradle,则使用不同于标记中指定的包 NAME的applicationIdSuffix 或者 applicationId,例如支持不同的生成变量: 在 android/app/build.gradle 中添加

    复制代码

    
    defaultConfig {
    
    
    . . .
    
    
     resValue"string","build_config_package","YOUR_PACKAGE_NAME_IN_ANDROIDMANIFEST.XML"
    
    
    }
    
    
    

    故障排除

    混淆器的问题

    当启用( 在默认情况下,Android发布版本) 时,它可以在缩小过程中重命名 BuildConfig 类,并防止对本地配置进行React。 若要避免这里问题,请向 android/app/proguard-rules.pro 添加异常:

    复制代码

    
    -keep class com.mypackage.BuildConfig { *; }
    
    
    

    mypackage 应该在你的app/src/main/AndroidManifest.xml 文件中 MATCH的package 值。

    测试

     

    为了模拟 Config.FOO_BAR 用法,在 __mocks__/react-native-config.js 上创建 mock:

    复制代码

    
    //__mocks__/react-native-config.js
    
    
    export default {
    
    
     FOO_BAR: 'baz',
    
    
    };
    
    
    

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖。你可以通过运行以下命令来安装它们: ``` npm install react-native-svg react-native-svg-transformer ``` 2. 在项目的根目录下创建一个名为 `metro.config.js` 的文件(如果已存在,请跳过此步骤)。 3. 在 `metro.config.js` 文件中添加以下内容: ```javascript module.exports = { transformer: { assetPlugins: ['react-native-svg-transformer'], }, }; ``` 4. 接下来,在你的组件中,使用 `react-native-svg` 中的 `<SvgUri>` 组件来加载本地 SVG 图像。首先,确保你的 SVG 图像位于项目的 `assets` 文件夹中。 ```javascript import React from 'react'; import { View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; const MyComponent = () => { return ( <View> <SvgUri width={200} height={200} source={require('./assets/myImage.svg')} /> </View> ); }; export default MyComponent; ``` 在上面的示例中,我们使用 `require` 方法加载位于 `assets` 文件夹中的 `myImage.svg` 图像,并将其作为 `source` 属性传递给 `<SvgUri>` 组件。你可以根据自己的需要调整宽度和高度。 5. 确保你在重新启动 Metro Bundler 之前完成了以上步骤。你可以通过运行以下命令重新启动 Metro Bundler: ``` npx react-native start --reset-cache ``` 这样,你就可以使用 `react-native-svg` 和 `react-native-svg-transformer` 成功加载和显示本地 SVG 图像了。 希望对你有所帮助!如有任何疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值