React Native 如何调用我的吐司(native-base)我的代码的任何地方？

1zmg4dgp 于 2022-11-17 发布在 React

关注(0)|答案(2)|浏览(178)

我正在使用base-native（https：//docs.nativebase.io/Components.html#toast-def-headref），并在此代码中生成toast。

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'
 })
}

如果我把它放到一个函数中，我会得到错误，如下所示：

<Button onPress={()=> this.handlerToast()}
</Button>

我能做什么呢？

react-native

来源：https://stackoverflow.com/questions/59090564/how-to-call-my-toast-native-base-anywhere-of-my-code

2条答案

按热度按时间

yzuktlbb1#

如本机基础文档中所述：
要使吐司正常工作，您需要将最顶层的组件从本机基 Package 在内部。
因此，请使用原生基底<Root> Package 最上层的元件，如下所示：

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

赞(0）回复(0）举报 2022-11-17

qkf9rpyu2#

在最新版本的本机基础中，使用的是NativeBaseProvider，而不是Root

import {NativeBaseProvider} from 'native-base';
   export default () =>
     <NativeBaseProvider>
       <App/>
     </NativeBaseProvider>;

赞(0）回复(0）举报 2022-11-17

我来回答

React Native 如何调用我的吐司(native-base)我的代码的任何地方？

2条答案

相关问题

热门标签

最新问答