javascript - 如何在 render() 中没有 Spinner 组件的情况下显示 React Spinner

Question

我想在 React 应用程序中显示微调器，而不需要在 render() 中编写一些代码，就像在 Android 原生进度对话框中一样。

目前我将此行添加到我的 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>
  }
}

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