React Native - 如何在已安装的组件上更新屏幕答案

【问题标题】：React Native - How to update screen on an already mounted componentReact Native - 如何在已安装的组件上更新屏幕
【发布时间】：2018-11-29 05:36:35
【问题描述】：

我有 2 个屏幕：

主屏幕
登录屏幕

我的入口点是我的主屏幕，如果我已登录（获取数据），请注销然后登录到另一个帐户。由于我的 Home 组件已经挂载，因此我的数据不会更新，并且不会再次调用 this.getDatas()。我找不到解决方案，我想我需要在我的 Home.js 中使用“ComponentWillUpdate”来调用 this.getDatas() 或类似的东西，但你找不到解决方案。

这是我的代码：

Home.js

  componentDidMount = async () => {
    const { navigation } = this.props;
    if (!await AsyncStorage.getItem('auth')) {
      navigation.navigate('Login');
    } else {
      this.getDatas();
    }
  }

  getDatas() {
    axios.get(`${apiUrl}/me`).then((res) => {
      this.setState({
        datas: res.data.datas,
      });
    }).catch((err) => {
      console.warn(err);
    });
  }

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      password: null,
    };
  }

  logIn() {
    const { email, password } = this.state;
    axios.post(`${apiUrl}/auth`, {
      email,
      password
    }).then((res) => {
      navigation.navigate('Home');
    }).catch((err) => {
      console.warn('Error:', err);
    });
  }
}

App.js

const MainNavigator = createStackNavigator({
  Home,
  CreateGame,
  GamePreview,
  CardSelection,
  BonusCard,
  Game,
  GameResult
}, { initialRouteName: 'Home', headerMode: 'none', });

const LoginNavigator = createStackNavigator({
  Login,
  Subscribe,
  SubscribeNext,
  ForgottenPassword,
}, { initialRouteName: 'Login', headerMode: 'none', });

const RootNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  LoginNavigator,
  MainNavigator
}, { initialRouteName: 'AuthLoading' });

export default class App extends Component {
  render() {
    return <RootNavigator />;
  }
}

有什么想法吗？

【问题讨论】：

你应该重新考虑你的流程。主屏幕应该是Login 并且您将在AsyncStorage 中存储从您的后端检索的令牌。如果有令牌，则Login 屏幕应检查令牌的有效性，如果一切正常，则应加载Home 屏幕，否则它将显示Login 屏幕的登录表单。
我通过为入口点创建一个 LoaderView 来重新考虑它，它将检查我的用户是否已登录。但这并不能解决我的问题。所有关于令牌的 AsyncStorage 都已设置

标签： react-native react-props

【解决方案1】：

您应该考虑使用来自react-navigation 的Switch Navigator 用于您的应用程序中的身份验证流程。因此，一旦您退出应用程序并登录，应用程序屏幕就会从内存中弹出，因此当您重新登录时，componentDidmount 将再次被触发。

【讨论】：

我刚刚尝试了 Switch Navigator，但我得到了相同的结果。当我再次登录时，主屏幕已经安装了
@tinmarfrutos 请立即在您的问题中注明出处。