React Native 多行 Toast 消息

Question

美好的一天。

我想在React Native APP中添加多行toast消息。然而，它总是在第2行被切断。

这是我的代码：

let errString = errors.join("\n");
alerts(errString);

const alerts = (data) => {
  Toast.show({
    topOffset: 100,
    type: "error",
    text1: "ERROR",
    text2: `${data}`,
    visibilityTime: 500,
  });
};

消息上会这样截断：

A long first message
Another long second message...

我的第三条消息以后不再显示。

Answer 1

将这些配置传递到您的 toast 配置中：

import Toast, {BaseToast, ErrorToast} from 'react-native-toast-message';

const toastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      style={styles.style}
      contentContainerStyle={styles.contentContainerStyle}
      text1Style={styles.text1Style}
      text1NumberOfLines={2}
      text2Style={styles.text2Style}
      text2NumberOfLines={2}
    />
  ),
  error: (props) => (
    <ErrorToast
      {...props}
      style={[styles.style, styles.errorStyle]}
      contentContainerStyle={styles.contentContainerStyle}
      text1Style={styles.text1Style}
      text1NumberOfLines={2}
      text2Style={styles.text2Style}
      text2NumberOfLines={2}
    />
  ),
};
<Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />

检查此链接以获取完整的定制。

Answer 2

在您的

Toast.show

中，您可以这样做：

  Toast.show({
    topOffset: 100,
    type: "error",
    text1: "ERROR",
    text2: `${data}`,
    visibilityTime: 500,
    props: {
      text1NumberOfLines: //number of how many lines you want
    }
  });

当然你可以将这个道具

text1NumberOfLines

更改为

text2NumberOfLines

。

Answer 3

设置

style.height="auto"

和

text2NumberOfLines=0

。

效果：

这就是我的风格：

import React from "react";
import Toast, {
  BaseToast,
  BaseToastProps,
  ToastConfig,
} from "react-native-toast-message";

const toastProps: BaseToastProps = {
  text1Style: {
    fontSize: 18,
  },
  text2Style: {
    fontSize: 14,
  },
  text2NumberOfLines: 0,
  style: {
    height: "auto",
    paddingVertical: 10,
    paddingHorizontal: 0,
  },
};

export const toastConfig: ToastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#69C779",
        },
      ]}
    />
  ),
  error: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#FE6301",
        },
      ]}
    />
  ),
  warning: (props) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#FFC107",
        },
      ]}
    />
  ),
};

<Toast config={toastConfig} />