英文:
Connect expo based React Native app to local REST API server during development
问题
我正在构建一个简单的React Native应用（使用expo），需要连接到一个REST API服务器。
在生产环境中，REST API将只是一个常规的Web URL，但为了方便开发过程中，我希望能够连接到用于托管本地expo服务器的同一台服务器，即我运行npm run android的服务器。目前，这是一个本地IP地址，如10.2.2.45，但可能会更改。
是否有一种方法可以在React Native应用程序内部自动获取此本地服务器的IP地址？
英文:
I'm building a simple React Native app (using expo) that needs to connect to a REST API Server.
In production, the REST API will just be a regular web URL, but for convenience during development I'd like to be able to connect to the same server that is being used to host the local expo server, i.e. the server on which I run npm run android. This is currently a local IP address like 10.2.2.45 but might change.
Is there a way to get the IP address of this local sever automatically from within the React Native app?
答案1
得分: 2
使用 Expo 48.0.18 和 React Native 0.71.8
我发现最简单的方法是使用 expo-constants 模块，然后检索 Expo 应用程序存储 Expo 应用程序主机设备 IP 地址的 manifest。
import Constants from 'expo-constants';
const { manifest } = Constants;
const [host] = manifest.debuggerHost.split(':'); // 获取 Expo 应用程序的主机并移除端口号
host.concat(':YOUR_PORT') // 添加您的端口号
对于您的应用程序，一个简单的实现可能是这样的：
import { useState, useEffect } from 'react';
import Constants from 'expo-constants';
const { manifest } = Constants;
const [address, setAddress] = useState("")
useEffect(() => {
const getServerIPAddress = async () => {
if (manifest.packagerOpts.dev) { // 检查应用程序是否处于开发模式
console.log(manifest)
const [host] = manifest.debuggerHost.split(':'); // 获取 Expo 应用程序的主机并移除端口号
setAddress(host.concat(':YOUR_PORT')); // 添加您的端口号
} else {
setAddress('api.example.com'); // 用于生产环境的地址
}
};
getServerIPAddress();
}, [])
useEffect(() => {
const getData = async () => {
const f = await fetch(`http://${address}/api`);
const response = await f.json();
console.log(response) // Hello World
}
getData();
}, [address])
请注意：请将 YOUR_PORT 替换为您要使用的端口号，并将 api.example.com 替换为您的生产环境地址。
英文:
Working with expo 48.0.18 and react-native 0.71.8
The easiest way I found was to use expo-constants module and then retrieve the manifest where expo app stores the device ip address of the expo app host.
import Constants from 'expo-constants';
const { manifest } = Constants;
const [host] = manifest.debuggerHost.split(':'); // Get host of expo app and remove the port
host.concat(':YOUR_PORT') // Add your port
A simple implementation for your app would be something like this
import { useState, useEffect } from 'react';
import Constants from 'expo-constants';
const { manifest } = Constants;
const [address, setAddress] = useState("")
useEffect(() => {
const getServerIPAddress = async () => {
if (manifest.packagerOpts.dev) { // Check if app is in development mode
console.log(manifest)
const [host] = manifest.debuggerHost.split(':'); // Get host of expo app and remove the port
setAddress(host.concat(':YOUR_PORT')); // Add your port
} else {
setAddress('api.example.com'); // Address for production
}
};
getServerIPAddress();
}, [])
useEffect(() => {
const getData = async () => {
const f = await fetch(`http://${address}/api`);
const response = await f.json();
console.log(response) // Hello World
}
getData();
}, [address])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论