React Native에서 GPS 데이터를 수신 할 때 렌더링을 방지합니다.

Question

GPS 및 모바일 센서 데이터를 저장할 앱을 만들고 있습니다. 작은 텍스트를 저장하는 TextInput을 구현하려고합니다. 문제는 센서가 결과를 제공 할 때마다 render 메서드가 호출되므로 텍스트를 업데이트 할 수 없다는 것입니다.

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를 반환하여 다시 렌더링하지 못하도록 할 수 있습니다. 예를 들어 :

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

:

물론

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

이 당신은 그래서 당신의 TextInput는 다음과 같이 보일 것입니다, 참고로 this.textInput를 설정해야 작동합니다