react native 全局方法

2017-10-20 10:36:30 wojiaomaxiaoqi 阅读数 1089

()前言       

        【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 

       前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Native项目签名打包。    

          刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

在我们的React NativeFor Android应用开发完成之后,那么就需要进行发布上传应用市场了,在上传之后,那么有一个很重要的步骤就是签名打包。下面我们来详细看一下怎么样进行签名打包React Native应用。具体关于Android的签名文件生成(点击进入-注意翻墙)

()Android签名文件生成      

         上面有一个Android官方的签名生成方法的地址,大家可以进行详情查看,不过需要翻墙哦~。我现在给大家讲解两种签名生成的方法::keytool命令方式生成 ,②:AndroidStudio IDE进行生成。

        2.1.keytool命令生成签名秘钥

我们可以命令行运行如下命令:

  1. keytool -genkey -v -keystore my-release-key.keystore  -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000  
keytool -genkey -v -keystore my-release-key.keystore  -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

[注意].我这边环境变量已经配置了,注意上面的my-release-key这个名字可以自己取名,同时my-key-alias也是自己取名,其中第二个名称alias参数后边的别名,在后面你在为应用签名的时候需要用到,所以暂时记录一下这个别名。

上面的命令我们需要输入密钥库(keystore)密码和对应秘钥的密码,然后设置名字,组织,国家,省份相关的信息,最后会生成my-release-key.keystore的签名文件。

具体命令截图如下:


现在我们去用户默认目录下面会生成my-release-key.keystore文件。具体截图如下:


       2.2.Android Studio IDE进行生成秘钥文件

个人比较倾向于这一种方法,首先是图形界面的,而且少了命令行书写的问题,而且以前我记得在使用Eclipse开发Android的时候也一直使用这种方式,下面我们来看一下生成签名的具体步骤:

首先打开AndroidStudio菜单选择build->Generate Signed APK 在打开的界面点击Next,会弹出下面的界面


         然后点击create new在弹出的界面中选择填写秘钥存放的位置,名称,密码。同样还要写别名的名字,证书的所有者,国家,组织以及城市相关信息。


点击OK,会默认填写上创建好的签名的信息,


最后点击finish会生成签名秘钥,不过大家请注意看这边生成的秘钥和第一个命令行方法的秘钥的后缀不太一样的,这边是以jks结尾的,不过也没问题哦~也是同样可以签名的。


      以上两种方式已经给大家演示了,打包签名的方法了,下面我们正式来进行配置打包生成APK了。

()Gradle配置

        3.1.Gradle配置

             .首先我把刚刚成的签名文件复制到项目android/app文件夹下面(这边采用AS生成签名test.jks)


然后进行修改项目中gradle.properties文件,进行添加如下的代码(注意下面的签名和别名的名称和上一步放入的test.jks要一样,下面两项分别填写签名和别名的密码)-我取的密码为ztt12345

  1. MYAPP_RELEASE_STORE_FILE=test.jks  
  2. MYAPP_RELEASE_KEY_ALIAS=test_alias  
  3. MYAPP_RELEASE_STORE_PASSWORD=ztt12345  
  4. MYAPP_RELEASE_KEY_PASSWORD=ztt12345  
MYAPP_RELEASE_STORE_FILE=test.jks
MYAPP_RELEASE_KEY_ALIAS=test_alias
MYAPP_RELEASE_STORE_PASSWORD=ztt12345
MYAPP_RELEASE_KEY_PASSWORD=ztt12345

这一步我们是进行全局的gradlde进行变量化的配置,后边我们会在后边的步骤中给相应的应用进行签名。

[注意].以上的签名秘钥请大家一定要妥善保管,因为在应用发布的时候需要的。

 3.2.给应用添加签名-配置局部应用Gradle文件

        直接在工程目录下得android/app/build.gradle中以下节点添加如下内容:

  1. …  
  2. android {  
  3.     …  
  4.     defaultConfig { … }  
  5.     signingConfigs {  
  6.         release {  
  7.             storeFilefile(MYAPP_RELEASE_STORE_FILE)  
  8.             storePassword MYAPP_RELEASE_STORE_PASSWORD  
  9.             keyAlias MYAPP_RELEASE_KEY_ALIAS  
  10.             keyPasswordMYAPP_RELEASE_KEY_PASSWORD  
  11.         }  
  12.     }  
  13.     buildTypes {  
  14.         release {  
  15.             …  
  16.             signingConfigsigningConfigs.release  
  17.         }  
  18.     }  
  19. }  
  20. …  
...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFilefile(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPasswordMYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfigsigningConfigs.release
        }
    }
}
…

具体实例配置截图如下:


()生成签名包

         对于生成签名包得方式我们要分两种情况进行区分对待。第一种在项目目录android/app下有react.gradle文件的(这个采用react-nativeinit xxproject命令生成项目详情请看:点击进入第一讲)

第二种是不存在react.gradle文件,主要是通过原生Android项目移植到React Native平台中(该生成详情详情请看:点击进入第四讲)。下面这两种方法都讲一下:

        4.1.对存在react.gradle文件的项目打包

命令行切到reactnative主目录,然后运行下面的命令,请注意下面 android就是Android项目的目录名称

  1. cd android && ./gradlew assembleRelease  
 cd android && ./gradlew assembleRelease

这样运行截图如下:



       该命令运行结束之后,会在android/app/build/outputs/apk目录下面生成app-release.apk该文件,然后可以使用该apk进行上线发布。


4.2.对与不存在react.gradle文件的项目打包

         这边因为react.gradle文件不存在,主要针对第四讲课程中的项目(Android原生项目移植到React Native平台)来进行举例。

首先命令切换到该reactnative项目的主目录,然后运行以下的命令,生成assets文件夹

  1. mkdir -p android/app/src/main/assets  
mkdir -p android/app/src/main/assets

   紧接着运行以下命令,进行生成inde.android.bundle文件

  1. react-native bundle –platform android –dev false –entry-file index.android.js \  
  2.   –bundle-output android/app/src/main/assets/index.android.bundle \  
  3.   –assets-dest android/app/src/main/res/  
react-native bundle --platform android --dev false --entry-file index.android.js \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest android/app/src/main/res/

具体运行截图如下:


生成该文件目录截图如下:


最后运行之前的命令,进行代码和资源文件打包,生成的带有签名的apk还是在上面的目录中。

  1. cd android && ./gradlew assembleRelease  
cd android && ./gradlew assembleRelease

()运行Apk

        上面的步骤我们已经完成了项目的签名打包在对应的目录中生成中apk文件,下面我们直接运行以下的命令进行将apk安装到设备中,我这边直接采用了模拟器进行测试了。

  1. cd android && ./gradlew installRelease  
cd android && ./gradlew installRelease

该命令会进行安装我们的apk到我们的设备中,不过该不会安装完自动打开我们的app,我们需要自己点击启动一下即可了。完美运行截图如下:


()最后总结

          今天我们主要介绍了React Native for Android项目如何创建签名,以及打包的具体方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

       尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

2018-05-27 21:56:15 weixin_33759269 阅读数 133

由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了《React Native移动开发实战》后,对于React Native的关注就比较少了。最近由于公司之前的项目需要,所以React Native又重新回到我的世界,并且,最近出去面试深深的感觉到原生开发的饱和,不管是Android还是iOS,移动市场基本已经饱和,而更多的公司和开发者开始转向了前端,这对于移动开发人员,特别是有过跨平台开发经验或者小程序开发经验的开发者来说,学习前端是异常的容易。因此,我后面的目光也主要放在跨平台和大前端上。

对React Native发展历史比较了解的同学都知道,React Native早期除了性能外,生态也是特别差的,但是在经过了2017年的优化和发展之后,现在跨平台开发如React Native和Weex可以说是相当的吃香。并且,随着跨平台生态的逐渐形成,跨平台的组件和文章也越来越多。

今天给大家讲的是一个可以实现悬浮效果的组件,效果如下:
这里写图片描述
这里写图片描述

该库的源码地址为:https://github.com/mastermoo/react-native-action-button

安装

在项目中使用如下的命令安装react-native-action-button库:

npm i react-native-action-button --save

因为用到了react-native-vector-icons图标组件,需要还需要做下link,命令如下:

react-native link react-native-vector-icons

或者使用下面的命令执行link。

react-native link

使用实例

首先导入该。

import ActionButton from 'react-native-action-button';

例如下面是一个具体的实例代码:

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

其中,ActionButton组件是一个容器组件,即我们上面看到的“+”组件,而ActionButton.Item组件则是子组件。这有点类似于Android的RadioGrop和RadioButton的关系。

参数说明

ActionButton

  • size:按钮的大小,默认为56
  • active:是否显示按钮
  • position:按钮的位置,可以为left center right
  • offsetX:X轴上的偏移位置
  • offsetY:Y轴上的偏移位置
  • onPress:点击事件
  • onLongPress:长按事件
  • buttonText:按钮标题
  • verticalOrientation:弹出按钮的方向,up 或者 down
  • renderIcon:可以自定义按钮显示的样式,默认是一个加号

ActionButton.Item

  • size:按钮的大小,默认为56
  • title:按钮标题
  • buttonColor:按钮颜色
  • onPress:点击事件

当然除了上面介绍的一些常用属性外,react-native-action-button还有一些其他的属性,大家可以通过官方资料来学习。

2017-11-14 17:34:43 weixin_40166364 阅读数 5920

声明全局属性和方法,可以全局简单使用,不用每次在开发中都导入js文件

在index.ios.js或者index.android.js,导出项目

import {
    AppRegistry,
} from 'react-native';
import Root from './store/Root';

AppRegistry.registerComponent('Project', () => Root);

在Root.js文件中

import './Global';  // 导出全局属性

render() {
        return ( 
            <AppStack/>
        );
    }

声明一个Global.js文件

const UI_STANDARD = 375;
class Constant {

    static fontSizeXSmall = scaleFontSizeFunc(14);//字体
    static colorDefault = '#FFFFFF'; // 颜色
    static sizeMarginDefault = 10;  // 尺寸

    // 自适应屏幕(以iOS为模板)
    static scale(width) {
        return Dimensions.get('window').width / UI_STANDARD * width;
    }

}


const Log = (...params) => { // 全局Log
    if (GLOBAL.__DEV__) {
        console.log(params);
    }
}
import Api from './util/Api'; // 全局api 

// 导出
global.Log = Log;
global.Api = Api;
global.Config = Config;

然后在你的任意js文件中

    Log('这是全局的log')
    <View style={{width:Constant.scale(100), height: Constant.scale(100)}}, backgroundColor: Constant.colorDefault />
    Api.request(params).then((data) => {Log(data)}).catch((err) => Log(err))
2018-07-23 16:59:37 daniel1227 阅读数 1371

RN中有两种方式使用全局变量

1.通过导入导出文件的方式

新建constants.js文件

  1. const object = {

  2. website:'http://www.baidu.com',

  3. name:'百度',

  4. };

  5. export default object;

需要用到的时候导入文件

  1. import constants from './constansts.js'

  2. <Text>{constants.name}</Text>

还可以有另外一种导入文件的写法

  1. export default {

  2. website:'http://www.baidu.com',

  3. name:'百度',

  4. };

2.通过声明全局变量的方式

一定是先声明,后调用。

  1. global.a = 1;

  2. <Text>{a}</Text>

也可以专门写在一个文件当中。

  1. global.constants = {

  2. website:'http://www.baidu.com',

  3. name:'百度',

  4. };

调用方法,入口文件一次调用(比如index.iOS.js文件),全局使用。

  1. import './constants.js';

  2. <Text>{global.constants.name}</Text>

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/daniel1227/article/details/81170776

2019-08-13 17:11:10 u012827205 阅读数 1895

配置RN全局变量

事出有因

有些恒定变量,比如当前手机的宽度、高度和手机信息的一些配置等等。讨厌每次使用都要导入,import xx ...。这样的操作让人很烦躁!于是,想要配置一种全局的方式,减去每次使用都要import。这种方式当然是存在的,不用再使用 import xx … !!

全局变量关键字

配置全局变量要只要靠使用关键字global

在这里插入图片描述

如上图代码中,通过关键字global 加入全局变量 gScreen、gDevice、gColor和appName。然后在App(应用)入口处导入(import)即可!!否则,报错
在这里插入图片描述
在App应用入口导入
在这里插入图片描述

然后在应用的随意页面进行调用就能使用
在这里插入图片描述
这个是我写了一个Demo,然后在首页写了一个组件进行进行调用,然后展示全局变量的效果。完成!!!
在这里插入图片描述