diff --git a/.changeset/strong-fans-teach.md b/.changeset/strong-fans-teach.md new file mode 100644 index 0000000000..10898e06ef --- /dev/null +++ b/.changeset/strong-fans-teach.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': patch +--- + +noticeBar支持修改文本颜色 diff --git a/packages/react-native/src/notice-bar/AnimatedNotice.tsx b/packages/react-native/src/notice-bar/AnimatedNotice.tsx index 5242bd8687..59d6df1632 100644 --- a/packages/react-native/src/notice-bar/AnimatedNotice.tsx +++ b/packages/react-native/src/notice-bar/AnimatedNotice.tsx @@ -22,6 +22,7 @@ const { deviceWidth } = helpers; const AnimatedNotice: FC void }> = ({ icon, text, + textColor, animated, height, onContentLayout, @@ -79,13 +80,18 @@ const AnimatedNotice: FC - setTextWidth(e.nativeEvent.layout.width)}> + setTextWidth(e.nativeEvent.layout.width)} + > {textWithTail} {animated && ( - + {textWithTail} diff --git a/packages/react-native/src/notice-bar/index.md b/packages/react-native/src/notice-bar/index.md index a778effaad..41c9eb6c1b 100644 --- a/packages/react-native/src/notice-bar/index.md +++ b/packages/react-native/src/notice-bar/index.md @@ -140,6 +140,7 @@ group: | 属性 | 必填 | 说明 | 类型 | 默认值 | | ------------- | ------- | ---------------- | ------------------------- | ------- | | text | `true` | 通告栏文本 | `string` | | +| textColor | `false` | 通告栏文本颜色 | `keyof Theme['colors']` | | | icon | `false` | 左侧图标 | `ReactNode` | | | mode | `false` | 通告栏类型 | `close` \| `link` \| `''` | `''` | | onPress | `false` | 通告栏点击事件 | `() => void` | | diff --git a/packages/react-native/src/notice-bar/index.tsx b/packages/react-native/src/notice-bar/index.tsx index 3bc1c4a819..a6d49885e2 100644 --- a/packages/react-native/src/notice-bar/index.tsx +++ b/packages/react-native/src/notice-bar/index.tsx @@ -21,6 +21,7 @@ const NoticeBar: FC = props => { icon = , mode = '', text = '', + textColor = 'text', onPress, duration = DEFAULT_DURATION, animated = false, @@ -38,7 +39,7 @@ const NoticeBar: FC = props => { if (!visible) return null; const BaseContent = ( - + ); switch (mode) { diff --git a/packages/react-native/src/notice-bar/type.ts b/packages/react-native/src/notice-bar/type.ts index b51750b119..8b09086342 100644 --- a/packages/react-native/src/notice-bar/type.ts +++ b/packages/react-native/src/notice-bar/type.ts @@ -1,11 +1,15 @@ import { ReactNode } from 'react'; import { StyleProp, ViewStyle } from 'react-native'; +import { Theme } from 'src/theme'; + export interface NoticeBarProps { /** 左侧自定义图标 */ icon?: ReactNode; /** 通知栏内容 */ text: string; + /** 文字颜色 */ + textColor?: keyof Theme['colors']; /** 通知栏模式。close表示可关闭;link表示可点击;默认为空 */ mode?: 'close' | 'link' | ''; /** 点击事件 */