Question

您好，我对将params与state结合使用尚不了解。如果我想抓usernameValue，它可以工作。但是，我该如何setState isLoading: False进入导航选项。我尝试过：

componentDidMount = () => {
   const isLoadingState = this.state.isLoading;

    this.props.navigation.setParams({
      isLoadingState : false
    });
}

然后在navigationOptions内部

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    if (typeof params.usernameValue !== "undefined") {

我不知道该怎么做才能将isLoading状态设置为false，就像我使用setState({isLoading: false}), params.isLoadingState返回false但什么都没有发生一样，加载屏幕保持在那里

params.isLoadingState;
    }

}

它将返回false，但未分配给isLoading状态变量

   this.state = {
      isLoading: true
    };

isLoading变量设置为true。显示加载画面。当usernameValue未定义时，我要加载它；如果定义了username，我希望isLoading状态为false，这样加载就消失了。

我在这里想念什么？我知道如何使其与超时一起工作，但这不是我想要的。我希望正在定义或/和/或未定义的usernameValue上触发加载屏幕。

谢谢您的时间，我很感激

编辑已添加componentDidMount

componentDidMount = () => {
    console.log("START");

    const changeLoadingState = isLoadingState =>
      this.setState({ isLoadingState });

    const isLoadingState = this.state.isLoading;

    this.props.navigation.setParams({
      isLoadingState: false,
      changeLoadingState
    });

    this.setState({ visibleModal: "fancyLoading" });
    this.props.navigation.setParams({ removeItemValue: this.removeItemValue });
    this.fetchData();

    this._loadInitialStateSavedUsername().then(savedUsername => {
      console.log("savedUsername: " + savedUsername);
      if (savedUsername !== null) {
        this.setState({
          usernameValue: savedUsername
        });
        this.props.navigation.setParams({ usernameValue: savedUsername });
      }
    });

    this._loadInitialStateFacebookName().then(facebookName => {
      console.log("facebookName: " + facebookName);
      if (facebookName !== null) {
        this.setState({
          facebookName: facebookName
        });
        this.props.navigation.setParams({ facebookName: facebookName });
        this.setState({ visibleModal: "fancyFacebook" });
      }
    });

    this._loadInitialStateFacebookFirstName().then(facebookFirstName => {
      console.log("facebookFirstName: " + facebookFirstName);
      if (facebookFirstName !== null) {
        this.setState({
          facebookFirstName: facebookFirstName
        });
      }
    });

    this._loadInitialStateFacebookEmail().then(facebookEmail => {
      console.log("facebookEmail: " + facebookEmail);
      if (facebookEmail !== null) {
        this.setState({
          facebookEmail: facebookEmail
        });
      }
    });

    this._loadInitialStateFacebookPicture().then(facebookPicture => {
      console.log("facebookPicture: " + facebookPicture);
      if (facebookPicture !== null) {
        this.setState({
          facebookPicture: facebookPicture
        });
      }
    });

    Animated.timing(
      // Animate over time
      this.state.fadeAnim, // The animated value to drive
      {
        toValue: 1, // Animate to opacity: 1 (opaque)
        duration: 2000 // 2000ms
      }
    ).start(); // Starts the animation
  };

Answer 1

您可以在将参数添加到navigation的同时传递函数，然后使用该函数更改状态。

componentDidMount = () => {
  const changeLoadingState = (isLoading) => this.setState({isLoading});

  const isLoadingState = this.state.isLoading;

  this.props.navigation.setParams({
    isLoadingState : false,
    changeLoadingState
  });
}

然后您可以稍后在usernameValue如此更改时调用此函数：

const { params = {} } = navigation.state;

if (typeof params.usernameValue !== "undefined") {
  navigation.state.params.changeLoadingState(false);
} else {
  navigation.state.params.changeLoadingState(true);
}

希望这能回答您的问题。

如何在导航选项（参数）中将this.state.isLoading布尔值设置为false

1 个答案: