几个星期以来,我一直遇到问题,我在react-native应用程序中使用react-navigation,当我在调试模式下在设备上进行测试时,我可以在屏幕之间正确导航,但是当我构建签名的apk时,导航确实不再工作了。 我尝试了一切,但没有任何效果。
我正在使用本机反应0.61.2,反应导航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>
);
}
}
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)
非常感谢您的帮助
答案 0 :(得分:0)
似乎他们在0.60.2的捆绑中破坏了与JS Core相关的内容-我现在正在研究类似的问题,客户端的puchdb和后端的benchdb。
32位工作良好,直到我将“ metro-react-native-babel-preset”:“ 0.56.3”更新为最新版本-即使在32位版本中,它也停止工作。 原因是在RN中,他们在调试(Chrome V8)和发行版(JSC)中使用了不同的JS引擎-这对我来说是一个相当可疑的决定。对于98%的代码,它可以工作,但是在极端情况下,我们遇到了如此怪异的问题... 我将尝试RN V8