使用Mobx和React导航的React-Native Flash消息

时间:2019-02-01 04:21:28

标签: react-native mobx mobx-react flash-message

我正在尝试使用react-native-flash-message在我的应用程序中提供一些敬酒,并且应该将flash消息添加到我的根视图中。我无法弄清楚应用程序中的位置。我使用示例来启动和运行mobx / react-navigation / react-native,因此我的app.js实际上只是导出了一个如下所示的index.js:

import React from 'react';
import { createRootNavigator } from './router';
import { isSignedIn } from './auth';
import { Font, SplashScreen } from 'expo';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee, faHome } from '@fortawesome/free-solid-svg-icons';
import { configure } from 'mobx';
import { Provider } from 'mobx-react';
import _ from 'lodash';

import { RootStore } from './stores/RootStore';
import { getDecoratedStores } from './stores/util/store-decorator';
import { AsyncStorage } from 'react-native';
import FlashMessage from "react-native-flash-message";

configure({ enforceActions: 'observed' });
const rootStore = new RootStore();
const stores = getDecoratedStores(rootStore);

//Library of Icons
library.add(faCheckSquare, faCoffee, faHome);

export default class App extends React.Component<
  {},
  { checkedSignIn: boolean; signedIn: boolean; loaded: boolean }
> {
  constructor(props: any) {
    super(props);

    this.state = {
      signedIn: false,
      checkedSignIn: false,
      loaded: false,
    };
  }

  componentWillMount() {
    this._loadFontsAsync();

  }

  _loadFontsAsync = async () => {
    await Font.loadAsync({ robotoBold: require('../app/uiComponents/fonts/Roboto-Bold.ttf') });
    await Font.loadAsync({
      robotoRegular: require('../app/uiComponents/fonts/Roboto-Regular.ttf'),
    });

    this.setState({ loaded: true });
  };

  componentDidMount() {
    isSignedIn()
      .then(res => {
        SplashScreen.hide();
        this.setState({ signedIn: res as boolean, checkedSignIn: true });
      })
      .catch(err => {console.log(err); alert('Error')});
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;

    // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
    if (!checkedSignIn) {
      return null;
    }

    AsyncStorage.getItem('auth-demo-key').then((data) => console.log("Async Storage: " + data));

    const Layout = createRootNavigator(signedIn);
    return (
      <Provider {...stores}>
        <Layout />
      </Provider>
    );
  }
}

任何人都可以帮助我弄清楚如何在此return语句中添加我的Flash消息吗?我尝试将提供程序包装在视图中,但是失败并崩溃了我的应用程序,与将其添加到提供程序(视图)中一样,也尝试仅在提供程序中添加Flash消息,但这也失败了。有人可以帮忙吗?

0 个答案:

没有答案