如何在 react-native-navigation 中使用 react-native-flash-message

Question

我正在使用 Wix 的 react-native-navigation 并且我想使用 react-native-flash-message。 在官方文档https://www.npmjs.com/package/react-native-flash-message 中，他们给出了我们可以在全局和本地使用，但在我的代码中，我不知道应该在哪里使用它。

以下是我的代码。

这是我的 app.js

import { Navigation } from "react-native-navigation";
import { Provider } from "react-redux";
import registerScreens from './components/Screens'
import Icon from 'react-native-vector-icons/FontAwesome';

import configureStore from "./store/configureStore";

const store = configureStore();

registerScreens(Provider, store);

// Start a App
Navigation.events().registerAppLaunchedListener(() => {
    Promise.all([
        Icon.getImageSource("bars", 30, 'black'),
        Icon.getImageSource("share-alt", 30, 'black')
    ]).then(sources => {
        Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            name: 'app.NavigationDrawer',
                            passProps: {
                                text: 'This is a left side menu screen'
                            }
                        }
                    },
                    center: {
                        stack: {
                            id: 'mainStack',
                            children: [
                                {
                                    stack: {
                                        id: 'tab1Stack',
                                        children: [
                                            {
                                                component: {
                                                    name: 'app.Component'
                                                }
                                            }
                                        ],
                                        options: {
                                            topBar: {
                                                background: {
                                                    color: '#50A7C2',
                                                },
                                                title: {
                                                    text: 'Namaz Timing',
                                                    fontSize: 20,
                                                    //color: 'white',
                                                    fontFamily: 'Ubuntu',
                                                    alignment: 'left'
                                                },
                                                leftButtons: [
                                                    {
                                                        id: 'buttonOne',
                                                        icon: sources[0]
                                                    }
                                                ],
                                                rightButtons: [
                                                  {
                                                    id: 'buttonTwo',
                                                    icon: sources[1]
                                                  }
                                                ]
                                            }
                                        }
                                    }
                                },
                            ],
                            options: {
                                  topBar: {
                                      background: {
                                        color: '#50A7C2',
                                      }
                                  },
                            }
                        }
                    }
                }
            }
        });
    });
});

这是我想使用它的功能

import qs from 'qs';
import { AsyncStorage } from 'react-native';

export async function addMasjid(Name, Address, email, Timing1, Timing2, Timing3, Timing4, Timing5, Timing6, Timing7) {
    const Data = await AsyncStorage.getItem('tokenData');
    parsed = JSON.parse(Data)
    var token = parsed.access_token;
    return fetch(`URL`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: qs.stringify({
            'name': Name,
            'address': Address,
            'email': email,
            'time_': Timing,
            'time_': Timing,
            'time_': Timing,
            'time_': Timing,
            'time_': Timing,
            'time_': Timing,
            'time_': Timing,
        })
    })
        .then(res => res.json())
        .catch(err => console.log(err))

Answer 1

在 App.js 中导入 Flash Message 组件并在底部调用它。

应用程序.js

import React from "react";
import { View } from "react-native";
import FlashMessage from "react-native-flash-message";

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        // your entire code

        <FlashMessage position="top" />  <--- at the bottom
      </View>
    );
  }
}

现在，在您要使用它的文件中。

import { showMessage, hideMessage } from "react-native-flash-message";

然后，只需在您想要的函数中使用 showMessage 即可。 例子：

const someFunc = () => {
   showMessage({
      message : 'some message',
      type: 'success'
      ... other attributes
   })
}