React Native Base Toast错误

Question

我设置了以下React Native App，并尝试使用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>