首页 文章

使用本机基本Toast从Redux操作显示错误

提问于
浏览 次
2

我在React Native应用程序中使用NativeBase . 我正在尝试根据redux操作中设置的错误显示Toast组件，因为它是通过调用API发生的 .

它现在会显示，但目前我收到警告信息：

警告：在现有状态转换期间无法更新（例如在渲染或其他组件的构造函数中） . 渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到componentWillMount .

我不确定如何绑定这个或我能做些什么来解决警告 .

Render Method

render() {
  return (
    <View>
      {this.renderError()}
      {this.renderForm()}
    </View>
  );
}

Render Error Method

renderError() {
  if (this.props.error.type === 'server') {
    return (
      Toast.show({
        text: this.props.error.message,
        buttonText: 'Okay',
        duration: 5000,
        type: 'danger'
      })
    );
  }
}

Versions

反应原生：0.55.4

原生基地：2.4.5

Edit: 为了清晰起见，添加了一个示例

我需要根据服务器的响应显示Toast . 例如，如果用户名和密码与帐户不匹配，我需要呈现Toast .

Solution:

我最终创建了ToastService：

import { Toast } from 'native-base';

function showToast(message) {
  return (
    Toast.show({
      text: message,
      buttonText: 'Okay',
      duration: 5000,
      type: 'danger'
    })
  );
}

export default {
  showToast
};

现在在我的行动中我可以打电话：

ToastService.showToast(data);
react-native react-redux toast native-base

2 回答

  • 3

    您可以创建一个函数并在外面调用它 . 但请确保您的应用程序使用native-base的Root组件进行换行 . 无需像您一样返回组件 . 调用此函数将显示toastr，现在您可以随时随地调用 . 但请确保Root组件包装您的应用程序 .

    从'native-base'导入;

    export const toastr = {
  showToast: (message, duration = 2500) => {
    Toast.show({
      text: message,
      duration,
      position: 'bottom',
      textStyle: { textAlign: 'center' },
      buttonText: 'Okay',
    });
  },
};

    现在在你的动作中你可以调用toastr函数

    toastr.showToast('Verication code send to your phone.');

    或者在redux行动中

    const signup = values => dispatch => {
  try {
    // your logic here


  } catch (error) {
    toastr.showToast(error.message)
  }
}
    回复于
  • 0

    检查React Native Seed以实现此实现https://reactnativeseed.com/

    回复于

相关问题