fix(SearchBar): 增加placeholderColor api & 继承SearchInputBar属性

Author: ChenlingasMx

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

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {SafeAreaView} from 'react-native';
+import {SafeAreaView, Text} from 'react-native';
 import {SearchBar} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout from '../../Layout';
@@ -40,6 +40,9 @@ const SearchBarDemo = (props: ComProps) => {
         labelInValue
         options={data}
         onChange={val => console.log('val', val)}
+        placeholderColor="#333"
+        placeholder="请输入"
+        searchRender={<Text>请搜索111</Text>}
       />
     </SafeAreaView>
   );

packages/core/src/SearchBar/README.md

@@ -128,7 +128,63 @@ export default Demo
 
 ```
 
+### 修改搜索文本默认颜色
+
+```jsx mdx:preview&background=#bebebe29
+import { SearchBar } from '@uiw/react-native';
+import React from 'react';
+
+function Demo() {
+  return (
+    <SearchBar
+      showClear
+      labelInValue
+      options={[
+        {label:'上海',value:1},
+        {label:'南京',value:2}
+      ]}
+      onFocus={()=>{}}
+      onChange={val=>console.log('val',val)}
+      placeholder="请输入搜索"
+      placeholderColor="red"
+    />
+  );
+}
+
+export default Demo
+
+```
+
+### 继承了 SearchInputBar的属性
+
+```jsx mdx:preview&background=#bebebe29
+import { SearchBar } from '@uiw/react-native';
+import { Text } from 'react-native';
+import React from 'react';
+
+function Demo() {
+  return (
+    <SearchBar
+      showClear
+      labelInValue
+      options={[
+        {label:'上海',value:1},
+        {label:'南京',value:2}
+      ]}
+      onFocus={()=>{}}
+      onChange={val=>console.log('val',val)}
+      placeholder="请输入搜索"
+      searchRender={<Text>自定义搜索</Text>}
+    />
+  );
+}
+
+export default Demo
+
+```
+
 ### Props
+集成继承 `SearchInputBar` 属性 
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
@@ -144,6 +200,8 @@ export default Demo
 | extra | 图标 | JSX.Element | - |
 | showClear | 是否展示清除图标 | boolean | - |
 | contentStyle | 容器样式 | StyleProp<`ViewStyle`> | - |
+| placeholderColor | 搜索框默认文本颜色 | ColorValue | - |
+
 
 
 ### OptionsStateProps

packages/core/src/SearchBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo, useCallback } from 'react';
+import React, { useState, useEffect, memo } from 'react';
 import {
   View,
   Text,
@@ -9,14 +9,14 @@ import {
   Pressable,
   StyleProp,
   ViewStyle,
+  ColorValue,
 } from 'react-native';
 import MaskLayer from '../MaskLayer';
-import SearchInputBar from '../SearchInputBar';
+import SearchInputBar, { SearchInputBarProps } from '../SearchInputBar';
 import List from '../List';
-import { down } from './svg';
 import Icon from '../Icon';
 
-interface SearchBarProps {
+interface SearchBarProps extends Omit<SearchInputBarProps, 'onChange' | 'value'> {
   onChangeText?: (value: string) => void;
   options?: Array<OptionsState>;
   onChange?: (value: string | null) => void;
@@ -30,6 +30,7 @@ interface SearchBarProps {
   extra?: JSX.Element;
   showClear?: boolean;
   contentStyle?: StyleProp<ViewStyle>;
+  placeholderColor?: ColorValue;
 }
 
 interface OptionsState {
@@ -52,6 +53,8 @@ function SearchBar({
   extra,
   showClear = true,
   contentStyle = {},
+  placeholderColor,
+  ...searchInputBarProps
 }: SearchBarProps) {
   const [curValue, setCurValue] = useState<any>(value);
   const [visible, setVisivble] = useState(false);
@@ -83,7 +86,7 @@ function SearchBar({
   return !visible ? (
     <Pressable onPress={showSearchBar}>
       <View style={[disabled ? styles.disabled : styles.content, contentStyle]}>
-        <Text style={styles.contentTitle}>{textValue ? textValue : placeholder}</Text>
+        <Text style={[styles.contentTitle, { color: placeholderColor }]}>{textValue ? textValue : placeholder}</Text>
         {React.isValidElement(extra) ? (
           extra
         ) : curValue && showClear ? (
@@ -124,6 +127,7 @@ function SearchBar({
               </View>
             </TouchableWithoutFeedback>
           }
+          {...searchInputBarProps}
         />
         {loading ? (
           <ActivityIndicator color="#0A0258" size="large" style={styles.loading} />