如何在Expo托管的React Native应用中给安卓/iOS设置页加自定义输入字段？

核心逻辑 #

将用户输入的自定义端点存储在本地，每次发起API请求时，优先读取本地存储的端点；若没有自定义值，则使用默认的www.cloud.my-company.com。

具体实现步骤 #

1. 搭建设置页面的输入组件 #

用React Native原生的TextInput实现输入框，配合AsyncStorage保存用户配置：

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, StyleSheet, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const EndpointSettings = () => {
  const [endpoint, setEndpoint] = useState('');

  // 页面加载时读取已保存的端点
  useEffect(() => {
    const loadSavedEndpoint = async () => {
      const saved = await AsyncStorage.getItem('customApiEndpoint');
      if (saved) setEndpoint(saved);
    };
    loadSavedEndpoint();
  }, []);

  // 保存自定义端点到本地存储
  const saveEndpoint = async () => {
    if (!endpoint.trim()) {
      Alert.alert('提示', '请输入有效的端点地址');
      return;
    }
    // 简单校验URL格式
    try {
      new URL(endpoint);
    } catch (err) {
      Alert.alert('错误', '请输入合法的URL地址');
      return;
    }
    await AsyncStorage.setItem('customApiEndpoint', endpoint.trim());
    Alert.alert('成功', '端点已保存');
  };

  // 恢复默认端点
  const resetEndpoint = async () => {
    await AsyncStorage.removeItem('customApiEndpoint');
    setEndpoint('');
    Alert.alert('提示', '已恢复默认端点');
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="输入专属API端点（如：https://www.first-customer.cloud.my-company.com）"
        value={endpoint}
        onChangeText={setEndpoint}
        autoCapitalize="none"
        autoCorrect={false}
        keyboardType="url"
      />
      <View style={styles.buttonGroup}>
        <Button title="保存端点" onPress={saveEndpoint} />
        <Button title="恢复默认" onPress={resetEndpoint} color="#666" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 15,
  },
  input: {
    height: 45,
    borderColor: '#ddd',
    borderWidth: 1,
    paddingHorizontal: 12,
    borderRadius: 6,
  },
  buttonGroup: {
    flexDirection: 'row',
    gap: 10,
    justifyContent: 'space-between',
  },
});

export default EndpointSettings;

2. 封装API请求工具 #

统一管理API端点的读取逻辑，所有请求都通过这个工具发起：

import AsyncStorage from '@react-native-async-storage/async-storage';

// 默认端点
const DEFAULT_API_ENDPOINT = 'https://www.cloud.my-company.com';

// 获取当前使用的API端点
export const getCurrentEndpoint = async () => {
  const customEndpoint = await AsyncStorage.getItem('customApiEndpoint');
  return customEndpoint || DEFAULT_API_ENDPOINT;
};

// 通用请求函数示例
export const requestApi = async (path, options = {}) => {
  const endpoint = await getCurrentEndpoint();
  const url = `${endpoint}/${path.replace(/^\//, '')}`;
  const response = await fetch(url, options);
  
  if (!response.ok) {
    throw new Error(`请求失败：${response.statusText}`);
  }
  
  return response.json();
};

3. 在业务页面中使用 #

直接调用封装好的requestApi即可自动使用当前配置的端点：

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { requestApi } from './api/utils';

const DataScreen = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      try {
        const result = await requestApi('api/v1/user/data');
        setData(result);
      } catch (err) {
        console.error('加载数据失败：', err);
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, []);

  if (loading) {
    return <ActivityIndicator style={{ flex: 1 }} />;
  }

  return (
    <View style={{ padding: 20 }}>
      <Text>加载的数据：{JSON.stringify(data)}</Text>
    </View>
  );
};

export default DataScreen;

额外说明 #

• Expo环境下需要先安装AsyncStorage依赖：执行npx expo install @react-native-async-storage/async-storage
• 可以根据需求扩展输入框的校验逻辑，比如限制只能输入符合公司域名规则的地址
• 如果需要支持环境切换（开发/生产），可以在getCurrentEndpoint中结合环境变量做判断

内容的提问来源于stack exchange，提问作者Fatih Erkam Dinler