在React Native中接收GPS數據時防止渲染

Question

我正在製作一個應用程序來存儲GPS和移動傳感器數據。我正在嘗試實現一個TextInput，以存儲一個小文本。問題在於每次傳感器給出結果時都會調用渲染方法，所以我無法更新文本。

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> 
    ) 
} 

有沒有人有這方面的解決方案？

Answer 1

您可以檢測TextInput是否專注於isFocused()，並通過在shouldComponentUpdate()上返回false來防止重新渲染。例如：

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

當然，對於這個工作，你需要設置this.textInput作爲參考，所以你應該TextInput這個樣子：

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