android - Building react-native project with eas - Stack Overflow

admin管理员组

文章数量:1332881

I made a react-native project using expo for a barcode scanner app and I need to make a .apk file in order to install it on a physical device. When I test my app using expo it works exactly like it's supposed to do. The .apk builds correctly, but when I install it on my physical device it asks the permissions for the camera but after that it just renders a white page. I guess there might be a problem with the version of my stack navigator used in App.js.

I try building it using this command:

eas build -p android --profile preview

My eas.json looks like this:

{
  "cli": {
    "version": ">= 13.3.0",
    "appVersionSource": "remote"
  },
  "build": {
    "preview":{
      "android": {
        "buildType": "apk"
      }
    },
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}

And my dependencies like these:

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/cli": "^15.1.2",
    "@react-native-community/slider": "^4.5.5",
    "@react-navigation/native": "^7.0.3",
    "@react-navigation/stack": "^7.0.4",
    "axios": "^1.7.7",
    "expo": "~52.0.7",
    "expo-camera": "^16.0.5",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-native": "^0.76.2",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-safe-area-context": "^4.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

This is my App.js:

import 'react-native-gesture-handler';

import React, {useState, useEffect, useContext} from "react";
import { Text } from "react-native";
import { Camera } from "expo-camera";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AuthentificationScreen from "./src/Authentification";
import HandleNewScan from "./src/HandleNewScan";
import Homepage from "./src/Home";
import MyItemsPage from "./src/MyItems";
import InAppScanner from "./src/ScanItem";
import Scanner from "./src/ScanToken";
import AddItem from "./src/AddItem";
import DeleteItem from "./src/DeleteItem";
import UpdateItem from "./src/UpdateItem";
import {AppContext} from "./src/AppContext";

const Stack = createStackNavigator();


export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [scannedInApp, setScannedInApp] = useState(false);
  const [dataBarcode, setDataBarcode] = useState();
  const [typeBarcode, setTypeBarcode] = useState();
  const [userId, setUserId] = useState(null);
  useEffect(() => {
    const getCameraPermissions = async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    };
    setScanned(false);
    getCameraPermissions();
  }, []);

 
  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return(
    <AppContext.Provider value = {{hasPermission, setHasPermission, scanned, setScanned, scannedInApp, setScannedInApp, dataBarcode, setDataBarcode, 
      typeBarcode, setTypeBarcode, userId, setUserId}}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Authentification">
          <Stack.Screen name="Authentification" component={AuthentificationScreen} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="HandleNewScan" component={HandleNewScan} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="Home" component={Homepage} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="MyItems" component={MyItemsPage} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="ScanItem" component={InAppScanner} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="ScanToken" component={Scanner} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="AddItem" component={AddItem} options={{
              headerShown: false, // Hides the header (including the title)
            }}/>
          <Stack.Screen name="DeleteItem" component={DeleteItem} options={{
              headerShown: false, // Hides the header (including the title)
            }}/> 
          <Stack.Screen name="UpdateItem" component={UpdateItem} options={{
              headerShown: false, // Hides the header (including the title)
            }}/> 
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>
  );
}

I tried configuring an android file locally but that's a bit too complicated for me as I am a beginner in react native. Please help me build this with eas or if not please provide a solution for configuring it locally...

本文标签： androidBuilding reactnative project with easStack Overflow