Question

我在Android上使用Mapview和React-Native（react-native-maps），我得到了这个：

https://cloud.githubusercontent.com/assets/11644230/19089605/4fac71f4-8a7b-11e6-998d-9a41461b2c16.png

问题是：我有“2个地图渲染”，其中一个在前面无法移动，另一个“小”在屏幕顶部正在工作......（在后台）正如你在我的照片上看到的那样，修复地图在旧金山，而另一个小地图则是绿色山谷......

你知道我怎么解决这个问题吗？

这是我的javascript文件：

// Fonction qui récupère la position actuelle de l'utilisateur
getCurrrentPosition() {
    // Permet de vérifier que la fonction s'exécute bien que lorsqu'on clique sur le bouton "get position"
    //console.log("execute");
    navigator.geolocation.getCurrentPosition(
        (position) => {
            var current_position = JSON.stringify(position);
            // C'est comme ça qu'on récupère la lattitude et la longitude car positon corresponds à un json (affiché dans current_position)
            //console.log("lattitude "+position.coords.latitude);

            // On set les différents state récupérés avec la position...
            this.setState({current_position});
            this.setState({latitude:position.coords.latitude});
            this.setState({longitude:position.coords.longitude});

        },
        (error) => alert(JSON.stringify(error)),
        {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
}


render() {
    return (
        <View style={styles.container}>
            <Text> Geolocalisation: </Text>
            <Text>
                <Text style={styles.title}>Position actuelle: </Text>
                {this.state.current_position}
            </Text>
            {/*Bouton qui récupère la position*/}
            <TouchableHighlight onPress={() =>  this.getCurrrentPosition()} style={styles.button}>
                <Text style={styles.buttonText}>Get current position </Text>
            </TouchableHighlight>

            {/*Affichage de la lattitude et de la longitude*/}
            <Text>Latitude : {this.state.latitude}</Text>
            <Text>Longitude : {this.state.longitude}</Text>
            <MapView  style={styles.container}
                initialRegion={{
                    latitude: 37.78825,
                    longitude: -122.4324,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                }}
            />


        </View>
    )
}

}

//这里我的StyleSheet（容器除外）

map: {
},
welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
},
instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
},
navigator: {
    flex: 1,
},
scrollView: {
    marginTop: 64
},
row: {
    padding: 15,
    backgroundColor: 'white',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
},
rowText: {
    fontSize: 17,
},
button: {
    height: 40,
    backgroundColor: 'blue',
    borderColor: 'blue',
},
    buttonText: {
    fontSize: 17,
    fontWeight: '500',
        color:'white',
},

非常感谢你的帮助！

React-native-maps Mapview Render

0 个答案: