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

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__伪全局变量来保护仅供开发使用的代码块。

它在编译步骤中内联，并变成process.env.NODE_ENV！==在CommonJS构建中进行“生产”检查。

对于独立版本，它在未最小化版本中变为真，并通过在最小化版本中保护的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`, { ...