Question

我有一个反应原生的测试应用程序，当我远程启用调试js时，一切正常。在运行后，它在设备（来自XCode）和模拟器中工作正常：

react-native run ios

问题是，如果我停止远程js调试，登录测试不再起作用。登录逻辑非常简单，我正在获取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 ），导入它并准备使用它。例如3 * $storedValue

Base64.btoa('123');

Answer 2

这就是我修复它的方式。根据{{3}}的建议，从NPM添加base-64模块：

npm i -S base-64

基于此，我提出了两种使用方法：

将其导入您需要的文件中

然后，您可以使用别名导入“ encode”和“ decode”方法，方法如下：

import {decode as atob, encode as btoa} from 'base-64'

当然，使用别名是可选的。

填充方式

您可以在React Native上将atob和btoa设置为全局变量。然后，您将不需要在需要的每个文件中导入它们。您必须添加以下代码：

import {decode, encode} from 'base-64'

if (!global.btoa) {
    global.btoa = encode;
}

if (!global.atob) {
    global.atob = decode;
}

您需要将其放置在index.js的开头，以便可以在另一个文件使用atob和btoa之前加载它。

我建议您将其复制到一个单独的文件（例如base64Polyfill.js）中，然后将其导入index.js

Answer 3

您的问题的主要部分已得到回答，但是我认为对于启用远程调试的原因仍然存在一些不确定性。

当进行远程调试时，JavaScript代码实际上是在Chrome中运行的，并且与虚拟dom的差异正通过Web套接字传递给本机应用。

http://facebook.github.io/react-native/docs/javascript-environment

atob和btoa在浏览器的上下文中可用，这就是为什么它可以在浏览器中使用的原因。

但是，当您停止调试时，JavaScript将再次在设备或模拟器上的进程中解释，而该进程无权访问浏览器提供的功能。

如果没有远程JS调试，React Native atob（）/ btoa（）无法正常工作

3 个答案:

将其导入您需要的文件中

填充方式