首页 > 解决方案 > 单击登录按钮后,React 本机发布签名的 apk 文件崩溃

问题描述

我使用以下链接创建了我的应用程序的 APK 文件。

https://facebook.github.io/react-native/docs/signed-apk-android#docsNav

成功安装,一旦我点击登录按钮,它就会显示“不幸的是,应用程序已关闭错误”。我尝试创建其他项目的 APK,它工作正常。但是,在这个项目中,它崩溃了。

创建项目后,我将项目名称更改为 string.xml 文件。这有什么问题吗?甚至尝试保留以前的名称,但我的问题没有得到解决。 我的 package.json 文件是

{
  "name": "awsUpload",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "aws-sdk": "^2.395.0",
    "link": "^0.1.5",
    "react": "16.6.3",
    "react-native": "^0.58.3",
    "react-native-aws3": "0.0.8",
    "react-native-device-info": "^0.26.2",
    "react-native-file-upload": "^1.0.4",
    "react-native-image-picker": "^0.28.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.6",
    "uniqid": "^5.0.3"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

我的包裹有问题吗?

我的按钮文件代码是

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Dimensions from 'Dimensions';
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  Animated,
  Easing,
  Image,
  Alert,
  View,
} from 'react-native';
import {Actions, ActionConst} from 'react-native-router-flux';

import spinner from '../images/loading.gif';

const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;

export default class ButtonSubmit extends Component {
  constructor() {
    super();

    this.state = {
      isLoading: false,
    };

    this.buttonAnimated = new Animated.Value(0);
    this.growAnimated = new Animated.Value(0);
    this._onPress = this._onPress.bind(this);
  }

  _onPress() {
    if (this.state.isLoading) return;

    this.setState({isLoading: true});
    Animated.timing(this.buttonAnimated, {
      toValue: 1,
      duration: 200,
      easing: Easing.linear,
    }).start();

    setTimeout(() => {
      this._onGrow();
    }, 2000);

    setTimeout(() => {
      Actions.secondScreen();
      this.setState({isLoading: false});
      this.buttonAnimated.setValue(0);
      this.growAnimated.setValue(0);
    }, 2300);
  }

  _onGrow() {
    Animated.timing(this.growAnimated, {
      toValue: 1,
      duration: 200,
      easing: Easing.linear,
    }).start();
  }

  render() {
    const changeWidth = this.buttonAnimated.interpolate({
      inputRange: [0, 1],
      outputRange: [DEVICE_WIDTH - MARGIN, MARGIN],
    });
    const changeScale = this.growAnimated.interpolate({
      inputRange: [0, 1],
      outputRange: [1, MARGIN],
    });

    return (
      <View style={styles.container}>
        <Animated.View style={{width: changeWidth}}>
          <TouchableOpacity
            style={styles.button}
            onPress={this._onPress}
            activeOpacity={1}>
            {this.state.isLoading ? (
              <Image source={spinner} style={styles.image} />
            ) : (
              <Text style={styles.text}>LOGIN</Text>
            )}
          </TouchableOpacity>
          <Animated.View
            style={[styles.circle, {transform: [{scale: changeScale}]}]}
          />
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    top: -95,
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 100,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor : '#48a4ff',
    height: MARGIN,
    borderRadius: 20,
    zIndex: 100,
  },
  circle: {
    height: MARGIN,
    width: MARGIN,
    marginTop: -MARGIN,
    borderWidth: 1,
    borderColor: 'blue',
    borderRadius: 100,
    alignSelf: 'center',
    zIndex: 99,
    backgroundColor: '#48a4ff',
  },
  text: {
    color: 'white',
  },
  image: {
    width: 24,
    height: 24,
  },
});

标签: androidreact-native

解决方案


问题不在于我的代码,我使用一组代码来访问设备位置,因此由于安全原因,它在更高版本的 Android 设备中失败。

我通过参考下面的链接解决了这个问题,

如何在运行时在 React Native 中请求 Android 设备位置的权限?


推荐阅读