React Native react-native-image-picker 使用 与 生成 签名

react-native-image-picker

1.yarn add react-native-image-picker
2.react-native link react-native-image-picker or react-native link
3.打开 android app src main AndroidManifest.xml文件

//添加这两行
//<uses-permission .....
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

4.打开 android app src main java com 项目名称 MainActivity.java

//添加这两行
    import com.imagepicker.permissions.OnImagePickerPermissionsCallback;  
    import com.facebook.react.modules.core.PermissionListener; 
public class MainActivity extends ReactActivity {
        // 添加如下一行:
        private PermissionListener listener;

5.项目页面

//‘在项目添加’
 // 第1步:
    import {View, Button, Image} from 'react-native'
    import ImagePicker from 'react-native-image-picker'
    var photoOptions = {
      //底部弹出框选项
      title: '请选择',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '选择相册',
      quality: 0.75, //照片的质量
      allowsEditing: true, //允许被编辑
      noData: false, //拍照时候不附带日期
      storageOptions: { //存储配置
        skipBackup: true, //IOS平台中,会自动把照片同步到 云端的存储,如果为true,表示为跳过,不会把照片上传到云端
        path: 'images'
      }
    }

    // 第2步:
    constructor(props) {
    super(props);
        this.state = {
          imgURL: ''
        }
      }

	// 第3步:
    <Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 }}></Image>
    <Button title="拍照" onPress={this.cameraAction}></Button>

    // 第4步:
    cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      //console.log('response' + response);
      if (response.didCancel) {
        return;
      }
      this.setState({
        imgURL: response.uri
      });
    })
  }

RN 打包签名

  1. 先保证正确配置所有的 RN 环境

  2. CMD运行: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

    my-release-key.keystore :表示一会要生成的那个签名文件的名称【切记】
    -alias :后面的东西【切记】,这个名称可以根据需求改动 my-key-alias
    10000 : 有效期【天】

    当运行这个命令后 需要输入一系列的参数,这个口令密码【切记】

  3. 当生成签名之后,这个签名,默认保存在 C:\User\用户名\my-release-key.keystore

  4. 把my-release-key.keystore文件放到你项目中的android/app文件夹下。
    编辑项目目录/android/gradle.properties 添加如下的代码(注意把其中的****替换为相应密码)

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

编辑项目目录下的android/app/build.gradle,添加如下的签名配置:

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

  1. 在项目的android/目录下运行 ./gradlew installRelease or ./gradlew assembleRelease
  2. 如果 ./gradlew assembleRelease 打包的APK 不能正常使用(比如,显示不正常,白屏,闪退) ,再试试 ./gradlew installRelease ,还是不行的话,可能配置有问题。

扩展

./gradlew -v 		版本号,首次运行,没有gradle的要下载的哦。

./gradlew clean 		删除~/app目录下的build文件夹

./gradlew build 		检查依赖并编译打包

./gradlew dependencies            依赖查看

./gradlew assembleDebug 	编译并打Debug包

./gradlew assembleRelease	 编译并打Release的包

./gradlew installRelease	 Release模式打包并安装

./gradlew uninstallRelease 	卸载Release模式包

./gradlew assembleTestRelease      	 Release模式 test 渠道打包

./gradlew installDebug		编译并安装debug包

./gradlew tasks --all			查看所有任务 包括缓存任务等

./gradlew install[productFlavorsName] app:assembleDebug       	结合productFlavorsName

./gradlew clean build --refresh-dependencies		强制更新最新依赖,清除构建并构建

./gradlew build --info --debug --stacktrace		调试模式构建并打印堆栈日志
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值