Réagir Natif atob() / btoa() ne fonctionne pas sans télécommande JS débogage
J'ai un test d'application dans réagissent natif, et tout fonctionne très bien quand je l'ai activé le debug js à distance. Il fonctionne très bien sur l'appareil (à partir de XCode) et le simulateur, après l'exécution:
react-native run ios
Le problème est que si j'arrête de distance js débogage, le login de test ne fonctionne plus.La connexion logique est très simple, je suis en train de faire une extraction d'une api pour tester la connexion, l'API point de terminaison est sur https.
Ce que je dois changer?
Mise à jour: Ce code fonctionne perfetly avec JS de Débogage à Distance est Activée, si je le désactiver, il ne fonctionne plus.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
View,
Button,
Alert
} from 'react-native'
export default class MyClass extends Component {
constructor (props) {
super(props)
this.testFetch = this.testFetch.bind(this)
}
async testFetch () {
const email = '[email protected]'
const password = '123456'
try {
const response = await fetch('https://www.example.com/api/auth/login', {
/* eslint no-undef: 0 */
method: 'POST',
headers: {
'Accept': 'application/json' /* eslint quote-props: 0 */,
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa(email + ':' + password)
}
})
Alert.alert('Error fail!', 'Fail')
console.log(response)
} catch (error) {
Alert.alert('Error response!', 'Ok')
}
}
render () {
return (
<View style={styles.container}>
<Button
onPress={this.testFetch}
title="Test me!"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
})
AppRegistry.registerComponent('testingReactNative', () => MyClass)
Grâce.
- Vous avez besoin d'au moins ajouter un peu de code ici. JS de débogage à distance est susceptible de provoquer cette erreur.
- Salut @zvona j'ai mis à jour la question avec le code... merci.
- Ok, mon erreur est que "btoa" n'est pas définie lorsque l'exécuter sans débogage... mais pourquoi? 🙂
- Oh, bonne prise.
atob
etbtoa
ne fonctionne pas sans débogueur (ne peut pas expliquer pourquoi). - Je vais vous écrire en Base64
atob
/btoa
les fonctions à utiliser et la réponse. - Juste comme ce problème,vous ne serez pas autorisé à utiliser quelques es6 caractéristiques réagir natif ne prennent pas en charge, mais chrome a fait,quand vous vous connectez votre réaction application native pour chrome remote debugger vous modifier le js de l'environnement d'exécution de chrome.c'est pourquoi vous ne pouvez pas utiliser certaines fonctionnalités sans débogueur distant et polyfills sont des solutions.
Vous devez vous connecter pour publier un commentaire.
Ici, vous allez (https://sketch.expo.io/BktW0xdje). Créer un composant distinct (par exemple, Base64.js), l'importation et il est prêt à utiliser. Par exemple
Base64.btoa('123');
C'est la façons je l'ai corrigé. Comme @chemitaxis suggère, ajouter en base 64 module de MNP:
Fondant sur ce dernier, je propose à un couple de façons de l'utiliser:
Importer les fichiers que vous en avez besoin
Ensuite, vous pouvez importer "encoder" et "décoder" les méthodes à l'aide d'alias, de cette façon:
Bien sûr, à l'aide d'alias est facultatif.
Polyfill de façon
Vous pouvez définir
atob
etbtoa
comme des variables globales à Réagir Natif. Ensuite, vous n'aurez pas besoin de les importer sur chaque fichier que vous en avez besoin. Vous devez ajouter ce code:Vous devez le placer au début de votre
index.js
, de sorte qu'il peut être chargé avant un autre fichier utiliseatob
etbtoa
.Je vous suggère de le copier sur un fichier séparé (disons base64Polyfill.js), et de l'importer ensuite sur
index.js
La partie principale de votre question a été posée, mais je vois qu'il y a toujours une certaine incertitude quant à pourquoi il travaille avec de débogage à distance est activé.
Lors du débogage à distance, le code JavaScript est effectivement en cours d'exécution dans le navigateur Chrome, et la diff au virtuel dom sont communiqués à l'application native sur un site web socket.
http://facebook.github.io/react-native/docs/javascript-environment
atob
etbtoa
sont disponibles dans le contexte du navigateur, et c'est pourquoi il y travaille.Lorsque vous arrêter le débogage, cependant, le JavaScript est de nouveau interprété dans un processus sur votre appareil ou sur simulateur, qui n'ont pas accès à des fonctions qui sont fournis par le navigateur.