React Native Expo安卓注册页位置权限弹窗时机异常求助

核心问题是你把权限请求和定位逻辑放在了**空依赖的useEffect**中，这个useEffect会在注册页组件挂载（即跳转至注册页）时立刻执行，导致权限弹窗直接弹出。按照预期，需将这些逻辑移至点击事件触发的函数内。

修改步骤： #

1. 提取定位逻辑为独立函数
   将原useEffect中的异步逻辑抽成单独的函数，比如getLocationAndAddress：

const getLocationAndAddress = async () => {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    console.log('Permission to access location was denied');
    return;
  }

  let location = await Location.getCurrentPositionAsync({});
  setLocation(location);
  console.log(location);
  let address = await reverseGeocodeAsync({
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  });
  setAddress(`${address[0].street}, ${address[0].city}`);
};

2. 移除自动执行的useEffect
   删除原空依赖的useEffect，避免组件挂载时自动触发权限请求。

3. 绑定点击事件到地图图标
   给TouchableOpacity添加onPress事件，调用上述函数：

<TouchableOpacity style={globalStyles.btnClickEye} onPress={getLocationAndAddress}>
  <FontAwesome
    name='map-pin'
    size={22}
    color="black"
  />
</TouchableOpacity>

4. 优化地址输入框显示
   调整TextInput的渲染逻辑，确保未获取地址时也能显示占位符：

<TextInput
  placeholder='Address'
  placeholderTextColor='black'
  keyboardType='default'
  editable={false}
  value={address || ''}
/>

修改后的完整代码片段： #

函数部分 #

const [location, setLocation] = useState(null);
const [address, setAddress] = useState(null);
const [addresstext, setAddresstext] = useState('');

const getLocationAndAddress = async () => {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    console.log('Permission to access location was denied');
    return;
  }

  let location = await Location.getCurrentPositionAsync({});
  setLocation(location);
  console.log(location);
  let address = await reverseGeocodeAsync({
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  });
  setAddress(`${address[0].street}, ${address[0].city}`);
};

UI部分 #

<View style={styles.container}>
  <View>
    <MaterialCommunityIcons
      name='map-marker-radius'
      size={23}
      color="black"
      style={styles.phoneNumberIcon} />
    <TextInput
      placeholder='Address'
      placeholderTextColor='black'
      keyboardType='default'
      editable={false}
      value={address || ''}
    />

    <TouchableOpacity style={globalStyles.btnClickEye} onPress={getLocationAndAddress}>
      <FontAwesome
        name='map-pin'
        size={22}
        color="black"
      />
    </TouchableOpacity>
  </View>

  {/* 测试用视图保留 */}
  <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 100 }}>
    {location && (
      <Text>
        Latitude: {location.coords.latitude}, Longitude:{' '}
        {location.coords.longitude}
      </Text>
    )}
    {address && <Text>{address}</Text>}
    <Text> testing </Text>
  </View>
</View>

修改后，仅当用户点击地图图标时才会触发权限请求和定位逻辑，符合预期。

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