feat:NoticeBar 通告栏增加文字样式修改功能 及 页面demo展示

example/examples/src/routes/MenuDropdown/index.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {MenuDropdown} from '@uiw/react-native';
+import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
+import {MenuDropdown, Toast} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
 
@@ -29,6 +29,12 @@ export default class MenuDropdownView extends Component<MenuDropdownProps> {
                 <MenuDropdown.Item>
                   <Text>列表</Text>
                 </MenuDropdown.Item>
+                <MenuDropdown.Item>
+                  <TouchableOpacity
+                    onPress={() => Toast.info('你点击了选择一', 2, 'info')}>
+                    <Text>选择一</Text>
+                  </TouchableOpacity>
+                </MenuDropdown.Item>
               </MenuDropdown>
             </Card>
           </Body>

example/examples/src/routes/NoticeBar/index.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {Image, Text, View} from 'react-native';
-import {NoticeBar, Spacing} from '@uiw/react-native';
+import {NoticeBar, Spacing, Icon} from '@uiw/react-native';
 
 export default class NoticeBarExample extends Component {
   render() {
@@ -10,9 +10,11 @@ export default class NoticeBarExample extends Component {
         source={{
           uri: 'https://zos.alipayobjects.com/rmsportal/bRnouywfdRsCcLU.png',
         }}
-        style={{width: 12, height: 12}}
+        style={{width: 12, height: 12, tintColor: 'balck'}}
       />
     );
+
+    const newCustomIcon = <Icon name={'star-off'} size={20} stroke={'blue'} />;
     return (
       <View style={{marginTop: 10}}>
         <NoticeBar
@@ -49,6 +51,24 @@ export default class NoticeBarExample extends Component {
         <NoticeBar mode="link" action={<Text>去看看</Text>}>
           Link demo for `actionText`.
         </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="link" textStyle={{color: 'blue'}}>
+          Change `actionText` color
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar
+          mode="link"
+          action={<Text style={{color: 'blue'}}>去看看</Text>}>
+          Change `Prompt` color
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar
+          mode="link"
+          icon={newCustomIcon}
+          textStyle={{color: 'blue', fontSize: 20}}
+          style={{backgroundColor: 'lightblue', height: 50}}>
+          Change demo for `action`.
+        </NoticeBar>
       </View>
     );
   }

packages/core/src/MenuDropdown/index.tsx

@@ -68,7 +68,7 @@ export default class MenuDropdown extends React.Component<MenuDropdownProps> {
 
     const { btnIcon, listHeightValue, listHeight } = this.state;
     return (
-      <View style={styles.menuBox}>
+      <View style={[styles.menuBox, { height: this.state.listHeight + 50 }]}>
         <Button {...btnProps} onPress={this.handleonPress} size={size}>
           <Text>{title}</Text>
           <Icon name={btnIcon} size={17} />

packages/core/src/NoticeBar/README.md

@@ -56,6 +56,12 @@ const NoticeBarExample = () => {
         <NoticeBar mode="link" action={<Text>去看看</Text>}>
           Link demo for `actionText`.
         </NoticeBar>
+        <Spacing />
+        <NoticeBar
+          textStyle={{color: 'blue', fontSize: 20}}
+          style={{backgroundColor: 'lightblue', height: 50}}>
+          Change demo for `action`.
+        </NoticeBar>
       </View>
     )
 }
@@ -72,3 +78,5 @@ export default NoticeBarExample;
 | onPress | 点击关闭或者操作区域的回调函数        | (): void |   |
 | marqueeProps | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}`  |
 | action | 用于替换操作 icon 的文案 | ReactElement | |
+| style    | 用于设置通告栏样式  | ViewStyle |  |
+| textStyle    | 用于设置通告栏文字样式  | TextStyle |  |

packages/core/src/NoticeBar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, StyleSheet } from 'react-native';
+import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, TextStyle, StyleSheet } from 'react-native';
 import Icon from '../Icon';
 import Marquee, { MarqueeProps } from './Marquee';
 
@@ -9,6 +9,7 @@ export type NoticeBarProps = {
   onPress?: any;
   icon?: any;
   action?: any;
+  textStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
   marqueeProps?: MarqueeProps;
 };
@@ -25,7 +26,8 @@ export default (props: NoticeBarProps) => {
       setShow(false);
     }
   };
-  let { children, mode, icon, style, action, marqueeProps } = props;
+  let { children, mode, icon, style, action, marqueeProps, textStyle } = props;
+
   let operationDom: any = null;
   icon = typeof icon === 'undefined' ? <Icon name="notification" color="#f4333c" size={15} /> : icon;
   if (mode === 'closable') {
@@ -41,7 +43,7 @@ export default (props: NoticeBarProps) => {
     <View style={[styles.notice, style]}>
       {icon && <View style={styles.left15}>{icon}</View>}
       <View style={[styles.container, icon ? styles.left6 : styles.left15]}>
-        <Marquee style={styles.content} text={children} {...marqueeProps} />
+        <Marquee style={[styles.content, textStyle]} text={children} {...marqueeProps} />
       </View>
       {operationDom}
     </View>