React Nativeでデバイス機能を最大限活用する方法：カメラとGPSの実例解説

   npm install react-native-vision-camera

import React, { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';

const CameraScreen = () => {
  const devices = useCameraDevices();
  const device = devices.back;

  useEffect(() => {
    (async () => {
      const cameraPermission = await Camera.requestCameraPermission();
      if (cameraPermission !== 'authorized') {
        console.warn('カメラの権限が許可されていません');
      }
    })();
  }, []);

  if (device == null) return <View style={styles.loading} />;

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  );
};

const styles = StyleSheet.create({
  loading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

export default CameraScreen;

   npm install @react-native-community/geolocation

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

const GPSExample = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Geolocation.requestAuthorization(); // iOS用
    Geolocation.getCurrentPosition(
      (position) => {
        setLocation(position.coords);
      },
      (error) => {
        console.error('位置情報の取得に失敗しました:', error);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }, []);

  if (!location) {
    return (
      <View style={styles.container}>
        <Text>現在地を取得しています...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text>緯度: {location.latitude}</Text>
      <Text>経度: {location.longitude}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

export default GPSExample;

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  console.log('iOS専用コード');
} else {
  console.log('Android専用コード');
}

Geolocation.getCurrentPosition(
  (position) => {
    console.log('位置情報取得成功:', position);
  },
  (error) => {
    console.error('位置情報取得失敗:', error);
  }
);

import React, { useState, useEffect } from 'react';
import { View, Button, Image, Text, StyleSheet } from 'react-native';
import { Camera } from 'react-native-vision-camera';
import Geolocation from '@react-native-community/geolocation';

const CameraWithGPS = () => {
  const [cameraPermission, setCameraPermission] = useState(false);
  const [location, setLocation] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);

  useEffect(() => {
    // カメラとGPSの権限をリクエスト
    (async () => {
      const cameraPerm = await Camera.requestCameraPermission();
      const locationPerm = await Geolocation.requestAuthorization();
      setCameraPermission(cameraPerm === 'authorized' && locationPerm === 'granted');
    })();
  }, []);

  const takePhotoWithLocation = async (camera) => {
    // 現在地を取得
    Geolocation.getCurrentPosition(
      async (position) => {
        setLocation(position.coords);
        // 写真を撮影
        const photo = await camera.takePhoto();
        setPhotoUri(photo.uri);
      },
      (error) => console.error('位置情報の取得に失敗しました:', error),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  };

  if (!cameraPermission) {
    return (
      <View style={styles.container}>
        <Text>カメラとGPSの権限を許可してください</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {photoUri ? (
        <>
          <Image source={{ uri: photoUri }} style={styles.photo} />
          <Text>緯度: {location?.latitude}</Text>
          <Text>経度: {location?.longitude}</Text>
        </>
      ) : (
        <Camera
          style={StyleSheet.absoluteFill}
          device={Camera.devices.back}
          isActive={true}
        />
      )}
      <Button title="写真を撮影" onPress={() => takePhotoWithLocation(Camera)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  photo: { width: 300, height: 400, marginTop: 20 },
});

export default CameraWithGPS;

import { PermissionsAndroid } from 'react-native';

async function requestPermissions() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: '位置情報の権限',
        message: 'アプリが位置情報を使用するには権限が必要です。',
        buttonNeutral: '後で',
        buttonNegative: 'キャンセル',
        buttonPositive: '許可',
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('権限が許可されました');
    } else {
      console.log('権限が拒否されました');
    }
  } catch (err) {
    console.warn(err);
  }
}

  npm cache clean --force
  cd android && ./gradlew clean && cd ..
  npx react-native run-android

Geolocation.getCurrentPosition(
  (position) => console.log('現在地:', position),
  (error) => console.error('エラー発生:', error.message),
  { enableHighAccuracy: true, timeout: 15000 }
);

import { Camera } from 'react-native-vision-camera';

const MyCameraComponent = () => {
  const devices = useCameraDevices();
  const device = devices.back;

  if (device == null) return null;

  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      isActive={true}
    />
  );
};

import Geolocation from '@react-native-community/geolocation';

Geolocation.getCurrentPosition(
  (position) => console.log('現在地:', position),
  (error) => console.error('エラー:', error),
  { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

import { Camera } from 'expo-camera';
import * as Location from 'expo-location';

const getCameraAndLocation = async () => {
  const cameraPermission = await Camera.requestCameraPermissionsAsync();
  const locationPermission = await Location.requestPermissionsAsync();

  if (cameraPermission.granted && locationPermission.granted) {
    const location = await Location.getCurrentPositionAsync({});
    console.log('位置情報:', location);
  }
};

import React, { useState, useEffect } from 'react';
import { View, Button, Image, Text, FlatList, StyleSheet } from 'react-native';
import { Camera } from 'react-native-vision-camera';
import Geolocation from '@react-native-community/geolocation';

const FieldWorkApp = () => {
  const [cameraPermission, setCameraPermission] = useState(false);
  const [location, setLocation] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);
  const [records, setRecords] = useState([]);

  useEffect(() => {
    (async () => {
      const cameraPerm = await Camera.requestCameraPermission();
      const locationPerm = await Geolocation.requestAuthorization();
      setCameraPermission(cameraPerm === 'authorized' && locationPerm === 'granted');
    })();
  }, []);

  const captureAndRecord = async (camera) => {
    // 現在地を取得
    Geolocation.getCurrentPosition(
      async (position) => {
        setLocation(position.coords);
        // 写真を撮影
        const photo = await camera.takePhoto();
        setPhotoUri(photo.uri);
        // データを記録
        setRecords((prevRecords) => [
          ...prevRecords,
          { uri: photo.uri, latitude: position.coords.latitude, longitude: position.coords.longitude },
        ]);
      },
      (error) => console.error('位置情報取得失敗:', error),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  };

  if (!cameraPermission) {
    return (
      <View style={styles.container}>
        <Text>カメラとGPSの権限を許可してください</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} device={Camera.devices.back} isActive={true} />
      <Button title="撮影して記録" onPress={() => captureAndRecord(Camera)} />
      <FlatList
        data={records}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.recordItem}>
            <Image source={{ uri: item.uri }} style={styles.recordImage} />
            <Text>緯度: {item.latitude}</Text>
            <Text>経度: {item.longitude}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  camera: { width: '100%', height: 400 },
  recordItem: { margin: 10, alignItems: 'center' },
  recordImage: { width: 200, height: 150 },
});

export default FieldWorkApp;