mercredi 21 février 2018

React Native -> How to see if checkbox is checked

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