如何在我的代码的任何地方调用我的吐司（基于本机）？

Question

我正在使用基本本机（https://docs.nativebase.io/Components.html#toast-def-headref）和此代码来生成敬酒。

from u in Context.Set<Users>()
join p in Context.Set<Pickups>() on u.Number equals p.Number
join r in Context.Set<Revisions>() on p.RevisionId equals r.RevisionId 

例如，我想在代码中的任何地方调用它

import React, { Component } from 'react';
import { Container, Header, Content, Toast, Button, Text } from 'native-base';
export default class ToastExample extends Component {
render() {
return (
  <Container>
    <Header />
    <Content padder>
      <Button onPress={()=> Toast.show({
          text: 'Wrong password!',
          buttonText: 'Okay'
        })}>
        <Text>Toast</Text>
      </Button>
    </Content>
  </Container>
 );
 }
}

如果将其放入函数中，则会出现错误，如下所示：

handlerToast= ()=>{
 Toast.show({
  text: 'Wrong password!',
  buttonText: 'Okay'
 })
}

我该怎么办？

Answer 1

如本机基础doc中所述：

  

要使Toast正常工作，您需要从本机库中包装最顶层的组件。

因此，使用本机基础<Root>包装最顶部的组件，如下所示：

import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
const AppNavigator = StackNavigator(
  {
    Page: { screen: Page },
  }
);
export default () =>
  <Root>
    <AppNavigator />
  </Root>;