React Native 多行 Toast 消息

rod james
2021-04-28  
1385  
    
2  

美好的一天。

我想在 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...

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

react-native ,  toast
stack overflow React Native multi line Toast Message
原文答案

答案:

作者头像
Umakant Vashishtha
2022-01-21    1      原文

将这些配置传递到敬酒配置中：

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

检查 this link 以进行完整的自定义。

作者头像
Mikołaj Wittbrodt
2022-06-01    0      原文

In your Toast.show you can do this like:

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

Of course you can change this prop text1NumberOfLines to text2NumberOfLines.

相关问题

标签