React Native Base Toast 错误

Question

我设置了以下 React Native 应用程序，我正在尝试使用 Native Base 中的 Toast 组件：

app.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import { Root } from "native-base";
import {StackNavigator} from 'react-navigation';
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';

export default class myApp extends Component {

render() {
  return (
    <Root>
    <AppNavigator />
  </Root>
  );
}
}
const Screens = StackNavigator({
  Main: {screen: MainView},
  Config: {screen: ConfigView}
})

AppRegistry.registerComponent('myApp', () => Screens);

MainView.js（简体）

import React, {Component} from 'react';
import { StyleProvider, Card, CardItem, Left, Right, Body, Icon, Toast, Header, Fab } from 'native-base';
import {StackNavigator} from 'react-navigation';

export default class MainView extends Component {
....
  showError = (msg, err) => {
    console.log("[ERROR]", err);
    Toast.show({
      text: msg,
      position: this.state.toastPosition,
      buttonText: this.state.toastErrorBtn
    });
  }
....
}

我尝试了多种方法，但总是出现此错误：

Answer 1

您的应用应从渲染 myApp 组件开始，如下所示： AppRegistry.registerComponent('myApp', () => myApp);。

在 myApp 中，您应该呈现 Screens 而不是 AppNavigator 的应用程序导航器，这就是您命名它的方式。

你的 app.js 应该是这样的：

import React, { Component } from 'react';
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
import {AppRegistry} from 'react-native';

export default class myApp extends Component {

    render() {
      return (
        <Root>
            <Screens />
        </Root>
      );
    }
}
const Screens = StackNavigator({
    Main: {screen: MainView},
    Config: {screen: ConfigView}
})

AppRegistry.registerComponent('myApp', () => myApp);

Answer 2

We should use Root component

import { Root } from "native-base";

<Root>
  // Screen
</Root>

React Native Base Toast 错误

React Native Base Toast error

react-native

native-base