Reactネイティブのatob（）/ btoa（）がリモートJSデバッグなしで動作しない

Question

私はリモートでデバッグjsを有効にしたときに、ネイティブの反応のテストアプリケーションを持っていて、すべて正常に動作します。これは、実行後に、（XCodeのからの）デバイスとシミュレータで正常に動作します：

react-native run ios 

問題は、私は、リモートのJSデバッグを停止した場合、ログインテストはありません、私は非常にシンプルださanymore.Theログインロジックを動作することですAPIをフェッチしてログインをテストすると、APIエンドポイントはhttpsを超えています。

変更する必要がありますか？

更新：このコードは、JS Debug Remote Enabledで完全に動作します。無効にすると、これは動作しなくなります。

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

ありがとうございます。

Answer 1

ここでは（https://sketch.expo.io/BktW0xdje）となります。別のコンポーネント（例：Base64.js）を作成してインポートすると、すぐに使用できます。たとえば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;