javascript - 如何在 render() 中没有微调器组件的情况下显示 react 微调器

Question

我想在 React 应用程序中显示微调器，而无需在 render() 中编写一些代码，就像我在 android native 进度对话框中所做的那样。

目前我将这一行添加到我的 render()

<Spinner visible={this.state.spinnerVisible} />

如果我想显示或隐藏微调器，请更改状态 spinnerVisible。

这个方法只需要从任何地方调用java android。

public static void showProDialog(Context context, String text) {
    try {
        ProgressDialog progressDialog = null;
        progressDialog = new ProgressDialog(context);
        progressDialog.setCancelable(false);
        progressDialog.setMessage(text);
        progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        progressDialog.setProgress(0);
        progressDialog.show();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

有没有可能做这样的事情？这样我就不需要到处维护状态。

Answer 1

如果你只是不想在任何地方维护状态，你可以让 Spinner 像这样维护它自己的状态:

class Spinner extends Component {
  show () {
    this.setState({ visible: true })
  }
  hide () {
    this.setState({ visible: false })
  }
}

并在您的 Root View 中添加一个 Spinner:

export const spinner = React.createRef()

class MyApp extends Component {
  render () {
    return (
      <View>
        {/* your app content */}
        <Spinner ref={spinner} />
      </View>
  }
}

如果你想显示微调器，只需从 './MyApp.js' 导入 { spinner } 并调用 spinner.show():