通过 React Native 中的辅助函数发送状态更新

Question

我有以下屏幕，我在其中调用辅助函数 pouchDB_helper.sync() 来为我收集大量数据。

目标是能够记录它当前在函数中的位置，这样我就可以在 render()

中给出百分比或状态更新

我是 react / react-native 的新手，所以我不确定这是否是正确的方法。如果可能的话，我希望能够将它保留为一个辅助函数，因为我在其他领域使用了这个函数，这只是我真正需要更新它在这个过程中的位置的唯一地方。

import React, { Component } from 'react';
import { ActivityIndicator, AsyncStorage, Button, StatusBar, Text, StyleSheet, View, } from 'react-native';
import * as pouchDB_helper from '../utils/pouchdb';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    padding: "5%",
    backgroundColor: "#fff",
    width:"100%"
  },
  statusHeader: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 10,
    textAlign:'center',
    width:'100%'
  }
});

type Props = {};
export default class SyncScreen extends Component<Props> {

  static navigationOptions = {
    title: 'Syncing Settings',
  };

  render() {

    pouchDB_helper.sync().then((response) => {
      //IT'S DONE
    }, (error) => { alert("THERE WAS AN ERROR"); });

    return (
      <View style={styles.container}>
        <Text style={styles.statusHeader}>Syncing, please wait..</Text>
        <Text>WHERE I WANT TO CHANGE TEXT</Text>
      </View>
    );
  }
}

pouchDB_helper例子

注意：这只是一个例子。我知道 .get() 不会花足够长的时间来保证状态，但我只是想了解这个概念。

import React from 'react';
import { AsyncStorage } from 'react-native';
import PouchDB from 'pouchdb-react-native'

export async function sync() {

    const company_id = await AsyncStorage.getItem('company_id');
    const device_db = new PouchDB(company_id, {auto_compaction: true});

    //STATUS UPDATE 1

    return device_db.get("settings").then((s) => {

      //STATUS UPDATE 2

      return device_db.get("get_this").then((s) => {

        //STATUS UPDATE  3

        return device_db.get("get_that").then((s) => {

          //STATUS UPDATE 4

        }, (error) => { return false; });

      }, (error) => { return false; });

    }, (error) => { return false; });
}

Answer 1

简单的方法是将一个函数传递给可以更改状态并在组件上设置所需文本的同步函数。

例子

constructor(props) {
  super(props);
  this.state = {
    level: 'some init value'
  };
}

onChangeState = (level) => {
  this.setState({level});
}

componentDidMount() {
  pouchDB_helper.sync(this.onChangeState).then((response) => {
    //IT'S DONE
    this.onChangeState('Finished');
  }, (error) => { alert("THERE WAS AN ERROR"); });
}

render() {
  return (
    <View style={styles.container}>
      <Text style={styles.statusHeader}>Syncing, please wait..</Text>
      <Text>{`Current level is ${this.state.level}`}</Text>
    </View>
  );
}

export async function sync(changeState) {

    const company_id = await AsyncStorage.getItem('company_id');
    const device_db = new PouchDB(company_id, {auto_compaction: true});

    //STATUS UPDATE 1
    changeState(1);
    return device_db.get("settings").then((s) => {

      //STATUS UPDATE 2
      changeState(2);
      return device_db.get("get_this").then((s) => {

        //STATUS UPDATE  3
        changeState(3);
        return device_db.get("get_that").then((s) => {

          //STATUS UPDATE 4
          changeState(4);
        }, (error) => { return false; });

      }, (error) => { return false; });

    }, (error) => { return false; });
}

通过 React Native 中的辅助函数发送状态更新

Sending status updates through helper function in react native

javascript

reactjs

react-native

react-native-ios

pouchDB_helper例子