React Native+Expo实现点击Share按钮触发位置权限请求

你的代码存在几个关键问题，导致权限请求在页面加载时就触发，而非点击按钮时：

1. 错误在普通函数内使用useEffect：useEffect是React Hook，只能在组件顶层或自定义Hook中调用，不能放在allowLocation这类普通函数里。
2. onPress直接执行函数：onPress={allowLocation()}会在组件渲染时立即调用函数，而不是点击按钮时触发，应该传递函数引用而非执行结果。
3. 未判断权限就获取位置：getCurrentPositionAsync应该在权限授予后再执行，否则会抛出权限不足的错误。

以下是修正后的完整代码：

import { useState, View, TouchableOpacity, Text } from 'react-native';
import * as Location from 'expo-location';

export default function LocationSettingsScreen() {
  const [location, setLocation] = useState(null);

  // 处理位置权限请求与获取位置的函数
  const handleShareLocation = async () => {
    // 请求前台位置权限
    const { status } = await Location.requestForegroundPermissionsAsync();
    
    if (status !== 'granted') {
      console.log('权限未授予');
      return;
    }

    console.log('权限已授予');
    
    // 权限通过后获取当前位置
    try {
      const loc = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.High // 可根据需求调整精度
      });
      setLocation(loc);
      console.log('获取到位置:', loc);
    } catch (error) {
      console.log('获取位置失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* 页面说明文本 */}
      <Text style={{ marginBottom: 40, paddingHorizontal: 20, textAlign: 'center' }}>
        我们需要获取你的位置信息以提供相关服务，点击下方按钮授权
      </Text>

      {/* Share按钮 */}
      <TouchableOpacity 
        onPress={handleShareLocation}
        style={{ paddingVertical: 12, paddingHorizontal: 24, backgroundColor: '#2196F3', borderRadius: 8 }}
      >
        <Text style={{ color: 'white', fontSize: 16 }}>Share</Text>
      </TouchableOpacity>

      {/* Add Later按钮 */}
      <TouchableOpacity 
        onPress={() => console.log('用户选择稍后添加')}
        style={{ paddingVertical: 12, paddingHorizontal: 24, marginTop: 20 }}
      >
        <Text style={{ fontSize: 16, color: '#666' }}>add later</Text>
      </TouchableOpacity>

      {/* 显示位置信息（可选） */}
      {location && (
        <Text style={{ marginTop: 30, paddingHorizontal: 20, textAlign: 'center' }}>
          当前位置: {JSON.stringify(location.coords)}
        </Text>
      )}
    </View>
  );
}

关键修正说明： #

• 移除了错误的useEffect，将权限请求逻辑整合到普通异步函数handleShareLocation中。
• onPress传递函数引用handleShareLocation，确保只有点击按钮时才触发权限请求。
• 在权限授予后才执行getCurrentPositionAsync，并添加错误捕获处理异常情况。
• 补充了完整的页面结构，包含说明文本和“add later”按钮，匹配你的需求场景。

内容的提问来源于stack exchange，提问作者Anonymous