React Native Atob()/btoa() funktioniert nicht ohne Remote-JS-Debugging

Question

Ich habe eine Test-App in nativen reagieren, und alles funktioniert gut, wenn ich die Debug js aus der Ferne aktiviert habe. Es funktioniert gut in Gerät (von XCode) und Simulator, nach Durchlauf:

react-native run ios 

Das Problem ist, dass, wenn ich remote js Debuggen beenden, der Login-Test nicht anymore.The Login Logik funktioniert, ist sehr einfach, ich bin Beim Abrufen einer API zum Testen einer Anmeldung ist der API-Endpunkt über https.

Was muss ich ändern?

Aktualisiert: Dieser Code funktioniert perfekt mit JS Debug Remote Enabled, wenn ich es deaktiviere, funktioniert es nicht mehr.

/** 
* 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@example.com' 
    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) 

Danke.

Answer 1

Hier gehen Sie (https://sketch.expo.io/BktW0xdje). Erstellen Sie eine separate Komponente (z. B. Base64.js), importieren Sie sie und Sie können sie verwenden. Zum Beispiel Base64.btoa('123');

// @flow 
// Inspired by: https://github.com/davidchambers/Base64.js/blob/master/base64.js 

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/='; 
const Base64 = { 
    btoa: (input:string = '') => { 
    let str = input; 
    let output = ''; 

    for (let block = 0, charCode, i = 0, map = chars; 
    str.charAt(i | 0) || (map = '=', i % 1); 
    output += map.charAt(63 & block >> 8 - i % 1 * 8)) { 

     charCode = str.charCodeAt(i += 3/4); 

     if (charCode > 0xFF) { 
     throw new Error("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range."); 
     } 

     block = block << 8 | charCode; 
    } 

    return output; 
    }, 

    atob: (input:string = '') => { 
    let str = input.replace(/=+$/, ''); 
    let output = ''; 

    if (str.length % 4 == 1) { 
     throw new Error("'atob' failed: The string to be decoded is not correctly encoded."); 
    } 
    for (let bc = 0, bs = 0, buffer, i = 0; 
     buffer = str.charAt(i++); 

     ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer, 
     bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0 
    ) { 
     buffer = chars.indexOf(buffer); 
    } 

    return output; 
    } 
}; 

export default Base64;