2017-01-23 26 views
0

Ich mache eine App zum Speichern von GPS-und mobilen Sensordaten. Ich versuche ein TextInput zu implementieren, um auch ein wenig Text zu speichern. Das Problem ist, dass jedes Mal, wenn die Sensoren ein Ergebnis geben, die Rendermethode aufgerufen wird, sodass ich den Text nicht aktualisieren kann.Verhindern Rendering beim Empfang von GPS-Daten in React Native

render(){ 
    this.fetchData(this.state.lat,this.state.lon,this.state.speed,this.state.accuracy, this.state.altitude, this.state.heading, this.state.x, this.state.y, this.state.z); 
    this.fetchText(this.state.activity); 

    return (
     <View> 
      <Text> 
      <Text style={styles.title}>Lat: </Text> {this.state.lat} 
      <Text style={styles.title}>Lon: </Text> {this.state.lon} 
      <Text style={styles.title}>Speed: </Text> {this.state.speed} 
      <Text style={styles.title}>Accuracy: </Text> {this.state.accuracy} 
      <Text style={styles.title}>Altitude: </Text> {this.state.altitude} 
      <Text style={styles.title}>X: </Text> {this.state.x} 
      <Text style={styles.title}>Y: </Text> {this.state.y} 
      <Text style={styles.title}>Z: </Text> {this.state.z} 
      <Text style={styles.title}>XG: </Text> {this.state.xg} 
      <Text style={styles.title}>YG: </Text> {this.state.yg} 
      <Text style={styles.title}>ZG: </Text> {this.state.zg} 
      <Text style={styles.title}>Azimuth: </Text> {this.state.azimuth} 
      <Text style={styles.title}>Pitch: </Text> {this.state.pitch} 
      <Text style={styles.title}>Roll: </Text> {this.state.roll} 
      <Text style={styles.title}>Steps: </Text> {this.state.steps} 
      </Text> 

     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      onSubmitEditing={(activity) => this.setState({activity})} 

      value={this.state.activity} 
     /> 
     </View> 
    ) 
} 

Hat jemand eine Lösung dafür?

Antwort

0

Sie können erkennen, ob der TextInput auf isFocused() fokussiert ist und das erneute Rendern verhindern, indem Sie false auf shouldComponentUpdate() zurückgeben. Zum Beispiel:

shouldComponentUpdate() { 
    return !this.textInput.isFocused(); 
} 

Natürlich für diese arbeiten Sie benötigen this.textInput als Referenz einzurichten, so dass Ihr TextInput sollte wie folgt aussehen:

<TextInput 
     style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
     onSubmitEditing={(activity) => this.setState({activity})} 
     ref={(input) => { this.textInput = input; }} 
     value={this.state.activity} 
    /> 
Verwandte Themen