React-navigation在调试模式下工作正常，但在发布模式下不起作用。

Question

我面临一个问题已经几周了，我在我的React Native应用程序中使用react-navigation，在调试模式下测试设备时，我可以在屏幕之间正确导航，但是当我构建签名APK时，导航不再起作用。

我尝试了所有方法，但仍然没有解决。

我正在使用React Native 0.61.2和React Navigation 4.0.10。

这是我的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)

这是我的android/gradle.build文件。

// 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' }
    }
}

这是我的根导航文件：

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;

我的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>
  );
 }
}

欢迎使用.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)

Thank a lot in advance for your help

- Pakenfit

Answer 1

看起来在0.60.2的打包中他们破坏了与JS Core相关的一些东西 - 我现在在客户端上遇到了与puchdb和后端的couchdb类似的问题。

32位在我将"metro-react-native-babel-preset": "0.56.3"更新到最新版本之前运行得很好 - 即使在32位发布版中停止工作了.. 原因是在RN中，在调试（Chrome V8）和发布（JSC）中使用不同的JS引擎 - 这个决定相当值得怀疑。对于98%的代码它都工作正常，但在边缘情况下我们遇到了这样奇怪的问题... 我打算尝试RN V8

- Alexander Godyay

---

非常感谢你的回复，@Alexander。我会尝试你提供的解决方案，并且再向你反馈结果。再次感谢你。 - undefined

我将react-navigation降级到3.0.1版本，但仍然无法正常工作。再次感谢您。 - undefined

这很奇怪，因为在我的情况下它是有效的。你尝试过从头开始使用rect-native init并安装所有内容吗？在某些情况下，这样做会有帮助。顺便问一下，你使用的是哪个平台 - Win、Mac 还是 Linux？ - undefined

你好@Alexander，再次感谢你的回复，很抱歉回复晚了。我终于找到问题所在，它并不是react-navigation的问题，只是一个连接问题（仍然是一个连接问题），因为我使用了nodeJS后端，当我点击提交按钮时，我使用axios向服务器发送post请求，但奇怪的是catch块被调用了，所以没有任何反应。我无法理解为什么，在调试模式下可以正常工作，但在生产环境中却不行。如果你有任何想法，请告诉我。 - undefined