Как изменить карту Если местоположение Pickup и DrofOff указаны в текстовых входах (React Native) - PullRequest
Новая
       29

Как изменить карту Если местоположение Pickup и DrofOff указаны в текстовых входах (React Native)

0 голосов
/ 09 октября 2018

Я создаю простое приложение для бронирования автомобилей, в котором я реализовал реагирующий нативный MapView в контейнере и выше. Я также дал 2 TextInputs, где пользователь может ввести местоположение получения и место высадки.

Снимок экрана MapView и TextInputs

Если пользователь вводит место получения и место высадки, я хочу, чтобы TextInputs отображал некоторые предложения в ListView о местоположении, которое вводит пользовательи когда оба ввода даны, я хочу, чтобы нижеприведенная карта изменилась с 2 рынками от места получения до места выгрузки.

SearchScreen.js 

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import MapView from 'react-native-maps';


const LATITUDE = 24.860735;
const LONGITUDE = 67.001137;
const LATITUDE_DELTA = 1;
const LONGITUDE_DELTA = 1;

export default class SearchRoutes extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: LATITUDE,
                longitude: LONGITUDE,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA,
            }
        }
    }


    static navigationOptions = {
        headerTitle: 'Search Routes',
        headerTintColor: '#fff',
        headerRight: (<TouchableOpacity />),


        headerTitleStyle: {
            flex: 1,
            padding: 0,
            color: '#fff',
            alignItems: 'center',
            textAlign: 'center',
            fontWeight: 'normal',
        },

        headerStyle: {
            backgroundColor: '#b5259e',
        },
    }


    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputContainer} >
                    <View style={{ flexDirection: 'row' }}>
                        <EntypoIcon name="dots-three-vertical" size={30} color='#fff' style={{ paddingTop: 12 }} />
                        <TextInput style={styles.pickUpInput} underlineColorAndroid="transparent" placeholder='Enter Your pickup location' />
                    </View>

                    <View style={{ flexDirection: 'row' }}>
                        <EntypoIcon name="dots-three-vertical" size={30} color='#fff' style={{ paddingTop: 12 }} />
                        <TextInput style={styles.pickUpInput} underlineColorAndroid="transparent" placeholder='Enter Your dropoff location' />
                    </View>
                </View>
                <View>
                    <MapView
                        style={styles.maps}
                        showsUserLocation={true}
                        region={this.state.region}>

                        <MapView.Marker coordinate={this.state.region} />

                    </MapView>
                </View>

                <View style={styles.footer} />
                <TouchableOpacity style={styles.btnFooter} onPress={() => { this.props.navigation.navigate('RoutesStack') }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}>
                        <Icon style={styles.iconFooter} name="search" />
                        <Text style={styles.footerText}>SEARCH</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    inputContainer: {
        height: 130,
        flexDirection: 'column',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#b5259e',
    },

    pickUpInput: {
        padding: 8,
        width: '80%',
        margin: 4,
        backgroundColor: '#d27cc4',
        borderRadius: 4,
    },

    maps: {
        width: '100%',
        height: '100%',
    },

    footer: {
        flex: 3,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },

    btnFooter: {
        backgroundColor: '#b5259e',
        padding: 15,
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
    },

    footerText: {
        fontSize: 14,
        fontWeight: 'normal',
        color: 'white',
    },

    iconFooter: {
        display: 'flex',
        fontSize: 20,
        marginRight: 10,
        color: 'white',
        alignItems: 'center',
        justifyContent: "center",
    },
});

Может кто-нибудь помочь мне с этим, яя застрял с этим в последние пару дней, я тоже пытался делать это (https://github.com/FaridSafi/react-native-google-places-autocomplete), но не получилось.Спасибо.

...