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

在React Native

1 个答案: