React Native 네트워크 3

구글 클라우드

firebase에서 만든 파일 그대로 사용
API 및 서비스 - 라이브러리 - Maps SDK for Android

• android API
• 주소 검색을 위한 API - places API

변경점
Main_Map.tsx

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, View, TextInput, TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen";
import { useState } from 'react';
import MapView, {PROVIDER_GOOGLE} from "react-native-maps";

function Main_Map() : JSX.Element {
    console.log("-- Main_Map()")

    const [initalRegion, setInitalRegion] = useState({
        latitude: 37.5666612,
        longitude: 126.9783785,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
    })

    const [showBtn, setShowBtn] = useState(false)

    const handleLongPress = async(event:any) => {
        setShowBtn(true)
    }

    const handleAddMarker = (title:string) => {
        setShowBtn(false)
    }

    return (
        <SafeAreaView style={styles.container}>
            <MapView style={styles.container} provider={PROVIDER_GOOGLE}
            region={initalRegion}>
            </MapView>

            <View style={{position:'absolute', width:'100%', height:'100%', padding:10}}>
                <View style={{flexDirection:'row'}}>
                    <View style={{flex:1}}>
                        <TextInput style={styles.input} placeholder={'출발지'}/>
                        <TextInput style={styles.input} placeholder={'도착지'}/>
                    </View>
                    <TouchableOpacity style={[styles.button, {marginLeft:10, justifyContent:'center'}]}>
                        <Text style={styles.buttonText}>호출</Text>
                    </TouchableOpacity>
                </View>
            </View>

            <TouchableOpacity style={[{position:'absolute', bottom:20, right:20}]}>
                <Icon name="crosshairs" size={40} color={'#3498db'}/>
            </TouchableOpacity>

            <View style={{position:'absolute', top: hp(50)-45, left: wp(50)-75, height:90, width:150}}>
                <TouchableOpacity style={[styles.button, {flex:1, marginVertical:1}]}
                onPress={()=>handleAddMarker('출발지')}
                >
                    <Text style={styles.buttonText}>출발지로 등록</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.button, {flex:1}]}
                onPress={()=>handleAddMarker('출발지')}
                >
                    <Text style={styles.buttonText}>도착지로 등록</Text>
                </TouchableOpacity>
            </View>

        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
    },
    button: {
        backgroundColor: '#3498db',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonDisable: {
        backgroundColor: 'gray',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        textAlign: 'center'
    },
    input: {
        height: 40,
        borderWidth: 2,
        borderColor: 'gray',
        marginVertical: 1,
        padding: 10
    }
})

export default Main_Map

API key 파일 경로
taxi>android>app>src>main>AndroidMenifest.xml

<meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="AIzaSyCxAEv4QYaJJxSTf46MC5BujoJcsavmjJw"/>
      <uses-library android:name="org.apache.http.legacy" android:required="false"/>

패키지
npm install react-native-maps
android 이동해서 gradlew.bat clean - 깨끗하게 치우기