React Native Maps - CSS HELP

Question

React Native Maps - CSS HELP

Navigation

#1 by (1 votes)

0

I'm trying to make an icon look under the mapview in my project, like this:

Butnowitlookslikethis:

Code:

<Viewstyle={styles.viewMaps}>{this.state.ready&&this.state.region&&this.state.region.latitude!=null&&this.state.region.longitude!=null?<MapViewref={map=>{this.map=map;}}style={styles.map}region={this.state.region}>{this.state.ready&&this.state.region&&this.state.region.latitude!=null&&this.state.region.longitude!=null?<MapView.Markercoordinate={{latitude:this.props.dataSource.latitude,longitude:this.props.dataSource.longitude}}></MapView.Marker>:null}</MapView>:null}<Viewstyle={styles.endereco}><Viewstyle={styles.viewGps1}><Textstyle={styles.enderecoText}>{this.props.dataSource.endereco}</Text></View><Viewstyle={styles.viewGps}><Iconname="map-marker-outline" size={35} color="#ca8a2d" />
                  </View>
              </View>
            </View>

CSS:

  map:{
    flex: 1,
    width: Dimensions.get('window').width,
    height: 110,
    position: "relative"
  },
  viewGps:{
    position: "absolute",
    backgroundColor: "#FFF",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 50,
    height: 50,
    width: 50,
    right: 10,
    top: -25
  },
  viewGps1:{
    justifyContent: "center",
    alignItems: "center",
    marginRight: 70
  },
  viewMaps:{
    flexDirection: 'column',
    flex: 1.5,
    alignSelf: "stretch",
    alignItems: "flex-start",
    justifyContent: "flex-start"
  }

javascript html css react-native react

asked by anonymous 08.05.2018 / 22:35

1 answer

XML signature error for EFD-Reinf Listing all categories with the total number of products

score 1 · Accepted Answer

Hello,

I did this exercise too, here is how I could do it.

import React from 'react';
import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
import MapView, { Marker } from "react-native-maps";
import {futura} from "../resources/Fonts";
import {cores} from "../resources/Colors";

const width = Dimensions.get("window").width;

export default class Mapa extends React.PureComponent {

    state = {
        region: {
            latitude: -30.0593446,
            longitude: -51.1734912,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.042,
        }
    };

    componentWillMount() {
        this.setState({
            region: {
                longitude: this.props.longitude,
                latitude: this.props.latitude,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421
            }
        })
    }

    render() {
        return (
            <View>
                <View
                    style={ styles.tamanhoMapa }>
                    <MapView
                        style={{ ...StyleSheet.absoluteFillObject }}
                        region={this.state.region}
                        minZoomLevel={15}>

                        <Marker
                            coordinate={{
                                latitude: this.state.region.latitude,
                                longitude: this.state.region.longitude
                            }} />

                    </MapView>
                </View>
                <View
                    style={ styles.mapaInfo }>
                    <Text
                        style={ styles.endereco }>
                        {this.props.endereco}
                    </Text>
                </View>
                <View
                    style={ styles.indicadorMapa }>
                    <Image
                        style={{ width: 40, height: 40 }}
                        source={ require('../../assets/imgs/ENDERECO.png') }/>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    mapaInfo: {
        backgroundColor: cores.primaria,
        justifyContent: 'center',
        width: width,
        height: 25
    },
    tamanhoMapa: {
        height: 120,
        width: width,
        alignItems: 'center'
    },
    indicadorMapa: {
        backgroundColor: 'white',
        width: 35,
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        height: 35,
        position: 'absolute',
        right: 0,
        bottom: 0,
        marginRight: 10,
        marginBottom: 5,
        borderRadius: 90
    },
    endereco: {
        textAlign: 'right',
        marginRight: 60,
        fontFamily: futura.light,
        color: 'white',
        fontSize: 15
    }
});