Im completely new to React-Native.
For one of my projects (for school) I have to make an Geolocotion application, where they want to know the Latitude and Longitude of the current position.
Next to those two things I need to make an CheckBox for showing (or not showing) the googleapi image of the position from maps.
Everything works, but.. I can not find a correct working of the check if the checkbox is checked or not..
My code now (render (checkbox is pointed by an arrow)):
render() {
const { checked } = this.state;
return (
<View style={styles.container}>
<TouchableHighlight onPress={ this._getLocation} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Get your Location!</Text>
</View>
</TouchableHighlight>
-->--> <CheckBox label='Check to add image of location.' value={this.state.checked} onValueChange={() => this.setState({ checked: !this.state.checked })}/>
<Text style={styles.textDefault}>Your Location.</Text>
<Text style={styles.textDefault}>Latitude: {this.state.lat}</Text>
<Text style={styles.textDefault}>Longitude: {this.state.long}</Text>
<Text style={styles.textDefaultPlus}>More or less {this.state.meters} meters.</Text>
<Image style= source={this.state.img}></Image>
</View>
);
My code now (if checked):
if (this.state.checked === true) {
crdImg = {uri:'https://maps.googleapis.com/maps/api/staticmap?center=' + crd.latitude + ',' + crd.longitude + '&zoom=17&size=800x800&sensor=false'};
}
else {
crdImg = 'Other uri, but to ong for here.'};
}
this.setState({ lat: crd.latitude, long: crd.longitude, meters: crd.accuracy, img: crdImg});
I tried: some of the answers here and This answer but, I can not get it to work as I want.
To be precise what I want:
-
If checkbox (pointed in code by an arrow) Is checked: Show image of current position from maps.
-
If checkbox is Not checked: Other image.
Anyone who can help me with this?
For questions, just ask and I will update this post if necesarry.
Aucun commentaire:
Enregistrer un commentaire