React Native APK安装后卡在启动页无法运行问题求助

我用VS Code开发了一款React Native应用，通过Expo在浏览器中运行正常。生成keystore文件后，使用gradlew assembleRelease命令打包为APK，该APK可安装在我的Android平板（SDK版本30，高于应用minSdkVersion21），但启动后停留在启动页无法进入应用。我已在AndroidManifest.xml中添加<uses-feature android:name="android.hardware.telephony" android:required="false" />，相关代码如下：

index.js #

import { registerRootComponent } from 'expo';

import App4 from './App4';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App4);

App4.js #

import React from 'react'
import List from './List.js'

const App = () => {
   return (
      <List />
   )
}
export default App

List.js #

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native'
   
class List extends Component {
   state = {
      products: []
   }

   componentDidMount() {
      this.GetAllProducts();
   }

   GetAllProducts() {
      //fetch("http://192.168.2.14:3000/getallproducts")
      fetch("https://categoriesexpress444.herokuapp.com/getallproducts")
         .then(res => res.json())
         .then(jsonresult => {
            this.setState({
                  products: jsonresult
            });
            console.log(this.state.products);
         });
   }

   getsrcPath(string) { // this function distinguishes between images in UserImages folder and images on Cloudinary
      var firstChar = string.charAt(0);
      if (firstChar == '~') { // image is in UserImages folder and item.picture path starts wih ~/UserImages/
         return string.substring(1, string.length);
      }
      else { // image is at Cloudinary and item.picture starts with http://
         return string;
      }
   }

   render() {
      return (
         <View>
            {
               this.state.products.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}>
                     <Text style = {styles.text}>{item.productname}</Text>
                     <Text>{item.description}</Text>
                     <Text>€ {item.price}</Text>
                     <img src={this.getsrcPath(item.picture)} />
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}
export default List

const styles = StyleSheet.create ({
   container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#ffffff',
      alignItems: 'center',
      cursor: 'none'
   },
   text: {
      color: '#4f603c'
   }
})

问题排查与解决步骤 #

1. 修复React Native组件使用错误 #

在List.js的render方法中，错误使用了Web端的<img>标签，React Native环境下必须使用react-native提供的<Image>组件，这是Release版本启动失败的核心原因：

// 错误写法
<img src={this.getsrcPath(item.picture)} />

// 正确写法
<Image 
  source={{ uri: this.getsrcPath(item.picture) }} 
  style={{ width: 100, height: 100 }} // 必须指定宽高，否则组件不渲染
/>

Expo浏览器环境会兼容Web标签，但原生Release版本不支持，直接触发渲染异常导致应用卡在启动页。

2. 补充网络请求异常捕获 #

GetAllProducts方法未处理请求失败的情况，若网络异常或接口不可达，Promise报错会阻塞应用流程：

GetAllProducts() {
  fetch("https://categoriesexpress444.herokuapp.com/getallproducts")
    .then(res => {
      if (!res.ok) {
        throw new Error(`请求失败：${res.status}`);
      }
      return res.json();
    })
    .then(jsonresult => {
      this.setState({ products: jsonresult });
      console.log(this.state.products);
    })
    .catch(error => {
      console.error('加载产品数据失败:', error);
      // 可添加错误状态提示用户
      this.setState({ loadError: '加载失败，请检查网络' });
    });
}

3. 确认网络权限配置 #

确保AndroidManifest.xml中已添加必要的网络权限，避免Release版本无法访问网络：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

4. 查看崩溃日志定位问题 #

通过Android Studio的Logcat连接平板（开启USB调试），筛选应用包名的日志，查看具体崩溃信息，精准定位异常点。

5. 验证签名打包配置 #

检查gradle.properties和app/build.gradle中的keystore配置是否正确，避免签名错误导致应用启动异常：

// gradle.properties示例配置
MYAPP_UPLOAD_STORE_FILE=my-release-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=你的密钥库密码
MYAPP_UPLOAD_KEY_PASSWORD=你的密钥密码

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