React Native：你可以强制刷新应用程序或重新渲染页面 onPress of a button？

Posted 2023-03-15

【中文标题】React Native：你可以强制刷新应用程序或重新渲染页面 onPress of a button？

【英文标题】：React Native: Can you force refreshing the App or rerendering the page onPress of a button?

【发布时间】：2015-08-05 05:20:29

【问题描述】：

我有一个带有 SignInPage 组件和 Main App 组件的应用程序。

如果用户已登录，应用程序将呈现 MainApp。否则会渲染 SignInPage。

按下 SignInPage 中的登录按钮后，我想刷新或重新呈现页面，以便它重定向到 MainApp 组件。

有没有办法做到这一点？或者这种路由的任何解决方法？

【问题讨论】：

我专门询问 React Native App。我设置了所有逻辑，用于在登录时保存当前用户 ID 并检查是否登录。我的问题是，有没有办法在按下成功登录按钮后从登录页面重定向到主应用程序组件？强制刷新可以，但不确定如何实现。有人知道怎么做吗？有没有类似的使用 React Native 构建的示例应用程序？

你需要使用navigator或者navigatorios组件并使用push到下一个路由或者替换现有路由（同页）来获得reload效果facebook.github.io/react-native/docs/navigator.html#content

是否可以在不使用 navigator 或 navigatorIOS 的情况下在 web dev 中像 location.reload() 那样做？

不使用导航器，你可以通过改变状态来强制渲染。因此，如果您将文本组件的值设置为 this.state.textvalue 然后调用 this.setState( textvalue: 'asdf' );你应该触发 shouldComponentUpdate。查看反应生命周期

@boredgames 谢谢你的工作就像一个魅力。

【参考方案1】：

所以我可以想到两种方法来做到这一点。一种是让应用程序始终尝试在应用程序启动时加载登录页面。然后在sign-in 组件中，执行如下操作：

componentDidMount: function() 
  if (currentUserStore.getUser()) 
    return this.props.navigator.push(
      title: 'Home',
      component: MainApp
    );
  

所以它的作用是检查你是否有用户登录。如果你登录了，那么它会导航到 MainApp 场景，否则它什么也不做并正常渲染sign-in。

另一种方法是使用状态。所以你可以制作一个Home 组件，例如：

var Home = React.createClass(
  getInitialState: function() 
    return 
      loggedIn: false
    ;
  ,
  componentDidMount: function() 
    if (currentUserStore.getUser()) 
      return this.setState(
        loggedIn: true
      );
    
  ,
  render: function() 
    if this.state.loggedIn
      <MainApp ... />
    else
      <SignIn ... />
  
);

然后在组件的 SignIn 部分，确保用户登录成功时setState 为 true。