Question

这是我的反应原生应用程序中的登录功能的样子。正如您所看到的，有一个用于API调用的URL，现在就是localhost。在制作时，必须有高效的URL。

如何以编程方式执行此操作？正如我想在不改变URL的情况下开发代码......

async function login (username, password) {
  try {
    await sleep(2000)
    let response = await fetch('http://localhost:4000/login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username,
        password
      })
    })
    let responseJson = response.json()
    return responseJson
  } catch (error) {
    Alert.alert('Error', 'Could not login')
  }
}

Answer 1

简单的答案是使用：

let url = __DEV__ ? 'http://dev.url.com' : 'https://prod.url.com';

来自https://facebook.github.io/react/contributing/codebase-overview.html：

您可以在代码库中使用__DEV__伪全局变量来保护仅开发代码块。

在编译步骤中内联，并在CommonJS版本中转换为process.env.NODE_ENV！=='production'。

对于独立版本，它在未编译的版本中成为现实，并且在缩小的版本中使用if块进行完全剥离。

对于更高级的配置，我使用react-native-config

Answer 2

您应该能够检查process.env.NODE_ENV环境参数并根据它设置URI：

const uriBase = process.env.NODE_ENV === 'development' 
   ? 'http://localhost:4000'
   : 'https://productionURL'

let response = await fetch(`${uriBase}/login`, { ...

React Native：在开发和生产模式下获取API URL

2 个答案: