React Native atob()/btoa() không hoạt động mà không cần gỡ lỗi JS từ xa

Question

Tôi có một ứng dụng thử nghiệm trong phản ứng gốc, và tất cả hoạt động tốt khi tôi đã kích hoạt các js gỡ lỗi từ xa. Nó hoạt động tốt trong thiết bị (từ XCode) và mô phỏng, sau khi chạy:

react-native run ios 

Vấn đề là nếu tôi dừng lại gỡ lỗi js từ xa, kiểm tra đăng nhập không hoạt động anymore.The lý đăng nhập là rất đơn giản, tôi là tìm nạp api để kiểm tra thông tin đăng nhập, điểm cuối API vượt quá https.

Điều tôi cần thay đổi?

Cập nhật: Mã này hoạt động hoàn hảo với JS Debug Remote Enabled, nếu tôi tắt nó, nó sẽ không hoạt động nữa.

/** 
* 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) 

Cảm ơn.

Answer 1

Ở đây bạn đi (https://sketch.expo.io/BktW0xdje). Tạo một thành phần riêng biệt (ví dụ: Base64.js), nhập thành phần đó và sẵn sàng để sử dụng. Ví dụ: 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;