文章/答案/技术大牛

发布

社区首页 >问答首页 >react native :改变吐司风格的正确方法是什么？

问react native :改变吐司风格的正确方法是什么？
EN

Stack Overflow用户

提问于 2021-03-25 16:09:27

回答 1查看 617关注 0票数 1

在我的例子中，我试图改变"toast“的风格，但由于某种原因，它对我不起作用，我不明白为什么，因为这完全是根据他们的例子。

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

export default function FOAM (props) {
const toastConfig = {
    success: ({ text1, ...rest }) => (
      <BaseToast
        {...rest}
        style={{ borderLeftColor: 'pink' }}
        contentContainerStyle={{ paddingHorizontal: 15 }}
        text1Style={{
          fontSize: 15,
          fontWeight: 'semibold'
        }}
        text1={'TIME UPDATE'}
        text2={null}
      />
    )
  };

return (
            <TouchableOpacity
              onPress={() => {
                <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
              }
            </TouchableOpacity>
 );
   }

javascript

css

reactjs

react-native

toast

回答 1

Stack Overflow用户

发布于 2021-05-17 13:44:56

下面是我如何在typescript中为react-native-toast-message定制字体大小：

toastConfig.tsx

import React from 'react';
import theme from 'assets/styles/theme';
import Toast, {AnyObject, BaseToastProps} from 'react-native-toast-message';
import SuccessToast from 'react-native-toast-message/src/components/success';
import ErrorToast from 'react-native-toast-message/src/components/error';
import InfoToast from 'react-native-toast-message/src/components/info';

const renderToast = (Component: React.FC<BaseToastProps>) => (
  props: BaseToastProps,
) => (
  <Component
    text1Style={{fontSize: theme.font.size.md}}
    text2Style={{fontSize: theme.font.size.sm}}
    onTrailingIconPress={() => Toast.hide()}
    {...props}
  />
);

const toastConfig: AnyObject = {
  success: renderToast(SuccessToast as React.FC<BaseToastProps>),
  error: renderToast(ErrorToast as React.FC<BaseToastProps>),
  info: renderToast(InfoToast as React.FC<BaseToastProps>),
};

export default toastConfig;

react-native-toast-message.d.ts

declare module 'react-native-toast-message/src/components/success' {}
declare module 'react-native-toast-message/src/components/info' {}
declare module 'react-native-toast-message/src/components/error' {}

Root.tsx

const Root = () => (
  <>
    <Toast config={toastConfig} ref={ref => Toast.setConfig(ref)} />
  </>
);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66795419

复制

相似问题

问react native :改变吐司风格的正确方法是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react native :改变吐司风格的正确方法是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react native :改变吐司风格的正确方法是什么？
EN