Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mon apk release react-native ne marche pas

La version debug marche bien

Sujet résolu
    20 octobre 2019 à 22:30:22

    Bonjour à tous,

    Ça fait maintenant des jours que j'ai un gros problème avec React-native, en effet mon application utilise React-navigation pour la navigation entre les screens.

    Elle marche très bien en mode développement mais dès que je builde l'apk et j'installe sur mon téléphone, la navigation ne se fait plus et aussi le Toast n'apparait pas.

    J'ai vraiment tout essayé mais rien ne fonctionne.

    Voici mon fichier app/build.gradle:

    project.ext.react = [
        entryFile: "index.js",
        enableHermes: false,  // clean and rebuild if changing
    ]
    
    apply from: "../../node_modules/react-native/react.gradle"
    
    /**
     * Set this to true to create two separate APKs instead of one:
     *   - An APK that only works on ARM devices
     *   - An APK that only works on x86 devices
     * The advantage is the size of the APK is reduced by about 4MB.
     * Upload all the APKs to the Play Store and people will download
     * the correct one based on the CPU architecture of their device.
     */
    def enableSeparateBuildPerCPUArchitecture = true
    
    /**
     * Run Proguard to shrink the Java bytecode in release builds.
     */
    def enableProguardInReleaseBuilds = true
    
    /**
     * The preferred build flavor of JavaScriptCore.
     *
     * For example, to use the international variant, you can use:
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * The international variant includes ICU i18n library and necessary data
     * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
     * give correct results when using with locales other than en-US.  Note that
     * this variant is about 6MiB larger per architecture than default.
     */
    def jscFlavor = 'org.webkit:android-jsc:+'
    
    /**
     * Whether to enable the Hermes VM.
     *
     * This should be set on project.ext.react and mirrored here.  If it is not set
     * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
     * and the benefits of using Hermes will therefore be sharply reduced.
     */
    def enableHermes = project.ext.react.get("enableHermes", false);
    
    android {
        compileSdkVersion rootProject.ext.compileSdkVersion
    
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    
        defaultConfig {
            applicationId "com.lumennui"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
        }
        splits {
            abi {
                reset()
                enable enableSeparateBuildPerCPUArchitecture
                universalApk true  // If true, also generate a universal APK
                include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
            }
        }
        signingConfigs {
            debug {
                storeFile file('debug.keystore')
                storePassword 'android'
                keyAlias 'androiddebugkey'
                keyPassword 'android'
            }
            release {
                if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                    storeFile file(MYAPP_UPLOAD_STORE_FILE)
                    storePassword MYAPP_UPLOAD_STORE_PASSWORD
                    keyAlias MYAPP_UPLOAD_KEY_ALIAS
                    keyPassword MYAPP_UPLOAD_KEY_PASSWORD
                }
            }
        }
        buildTypes {
            debug {
                signingConfig signingConfigs.debug
            }
            release {
                // Caution! In production, you need to generate your own keystore file.
                // see https://facebook.github.io/react-native/docs/signed-apk-android.
                signingConfig signingConfigs.release
                minifyEnabled enableProguardInReleaseBuilds
                proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            }
        }
        // applicationVariants are e.g. debug, release
        applicationVariants.all { variant ->
            variant.outputs.each { output ->
                // For each separate APK per architecture, set a unique version code as described here:
                // https://developer.android.com/studio/build/configure-apk-splits.html
                def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
                def abi = output.getFilter(OutputFile.ABI)
                if (abi != null) {  // null for the universal-debug, universal-release variants
                    output.versionCodeOverride =
                            versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
                }
    
            }
        }
    }
    
    dependencies {
        implementation project(':react-native-splash-screen')
        implementation project(':react-native-vector-icons')
        implementation project(':react-native-video')
        implementation fileTree(dir: "libs", include: ["*.jar"])
        implementation "com.facebook.react:react-native:+"  // From node_modules
    
        if (enableHermes) {
            def hermesPath = "../../node_modules/hermes-engine/android/";
            debugImplementation files(hermesPath + "hermes-debug.aar")
            releaseImplementation files(hermesPath + "hermes-release.aar")
        } else {
            implementation jscFlavor
        }
    }
    
    // Run this once to be able to run the application with BUCK
    // puts all compile dependencies into folder libs for BUCK to use
    task copyDownloadableDepsToLibs(type: Copy) {
        from configurations.compile
        into 'libs'
    }
    
    apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
    

    Voici le fichier android/build.gradle :

    // Top-level build file where you can add configuration options common to all sub-projects/modules.
    
    buildscript {
        ext {
            buildToolsVersion = "28.0.3"
            minSdkVersion = 16
            compileSdkVersion = 28
            targetSdkVersion = 28
        }
        repositories {
            google()
            jcenter()
        }
        dependencies {
            classpath("com.android.tools.build:gradle:3.4.2")
    
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
    }
    
    allprojects {
        repositories {
            mavenLocal()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url("$rootDir/../node_modules/react-native/android")
            }
            maven {
                // Android JSC is installed from npm
                url("$rootDir/../node_modules/jsc-android/dist")
            }
    
            google()
            jcenter()
            maven { url 'https://jitpack.io' }
        }
    }
    

    Voici mon fichier RootNavigation.js :

    import React from 'react';
    import { createAppContainer, createSwitchNavigator } from "react-navigation";
    import Chat from "../screens/Chat";
    import Welcome from "../screens/Welcome";
    
    const rootNav = createSwitchNavigator({
            welcome: {screen: Welcome},
            chat: {screen: Chat},
        },
        {
            initialRouteName: 'welcome'
        }
    );
    const RootNavigation = createAppContainer(rootNav);
    
    export default RootNavigation;

    Voici mon fichier App.js : 

    import React from 'react';
    import RootNavigation from "./navigations/RootNavigation"
    import SnackbarProvider from "./components/SnackBar";
    
    export default class App extends React.Component {
    
    	render(){
    		return (
                <SnackbarProvider>
                    <RootNavigation/>
                </SnackbarProvider>
    		);
    	}
    }

    Et mon fichier Welcome.js :

    import React from 'react'
    import Header from "../components/Header"
    import axios from 'axios'
    import '../constants/serverAdress'
    import {withSnackbar} from "../components/SnackBar"
    import {
        Button,
        ImageBackground,
        Tile,
        Overlay,
        TextInput,
        Title,
        Subtitle,
        Text,
        Card,
        Caption,
        Image,
        View
    } from "@shoutem/ui"
    import luminy from '../assets/images/luminy.jpg'
    import luminy2 from '../assets/images/luminy2.jpg'
    import {KeyboardAvoidingView, ScrollView} from "react-native";
    import { Provider, Portal, Modal} from "react-native-paper";
    import moi from '../assets/images/moi.jpg'
    import SplashScreen from 'react-native-splash-screen'
    
    class Welcome extends React.Component {
    
        constructor(props) {
            super(props)
            this.state = {
                pseudo: '',
                visible: false
            }
            this.onSubmit = this.onSubmit.bind(this)
        }
    
        _showModal = () => this.setState({ visible: true });
        _hideModal = () => this.setState({ visible: false });
    
        function
    
        componentDidMount() {
            SplashScreen.hide()
        }
    
        onSubmit(e){
            e.preventDefault()
            const { snackbar, navigation } = this.props
            axios.post(`${SERVER_ADRESS}/register`, { pseudo: this.state.pseudo })
            .then(res => {
                if(res.data.status !== undefined){
                    snackbar.showMessage(res.data.message)
                } else {
                    navigation.navigate('chat', {
                        id : res.data._id,
                        pseudo: this.state.pseudo
                    })
                }
            })
            .catch(error => {
                console.log(error)
            })
        }
        render() {
            return (
                <KeyboardAvoidingView
                    behavior="padding"
                    style={{flex: 1}}
                >
                    <Header title="Welcome" help helpAction={this._showModal}/>
                    <ImageBackground
                        styleName="large"
                        source={luminy2}
                    >
                        <Tile>
                            <Overlay styleName="image-overlay">
                                <Title styleName="sm-gutter-horizontal">Bienvenue sur LumEnnui</Title>
                                <Subtitle>Saisis ou crée ton pseudo et commence à  .....</Subtitle>
                            </Overlay>
                        </Tile>
                    </ImageBackground>
                    <ImageBackground
                        styleName="large"
                        source={luminy}
                    >
                        <TextInput
                            placeholder={'Pseudo'}
                            onChangeText={(text) => this.setState({pseudo: text})}
                        />
                        <Button
                            styleName="secondary"
                            style={{ marginTop: 20}}
                            onPress={this.onSubmit}
                        >
                            <Text>ACCEDER</Text>
                        </Button>
                    </ImageBackground>
                    {/*Modal section*/}
                    <Provider>
                        <Portal>
                            <Modal visible={this.state.visible} onDismiss={this._hideModal}>
                                <Card style={{ width: 200, height: 400}}>
                                    <Image
                                        styleName="medium-avatar"
                                        source={moi}
                                    />
                                    <View styleName="content">
                                        <ScrollView>
                                            <Subtitle>
                                               lorum ipsum
                                            </Subtitle>
                                            {/*<Subtitle style={{ color: 'red'}}>
                                                lorum ipsum
                                            </Subtitle>*/}
                                            <Caption>Créé par Mama DEMBELE aka Pakendux</Caption>
                                        </ScrollView>
                                    </View>
                                </Card>
                            </Modal>
                        </Portal>
                    </Provider>
                </KeyboardAvoidingView>
            );
        }
    }
    export default withSnackbar(Welcome)
    

    Merci  infiniment par avance pour votre aide.




    • Partager sur Facebook
    • Partager sur Twitter

    Mon apk release react-native ne marche pas

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown