refactor(rn): 实现 rn 端 input 组件中 placeholder color 的设置 (#11594)

* fix(rn): input 组件 TS 语法错误 #11562 * refactor(rn): 实现 placeholderStyle 设置 placeholderTextColor Co-authored-by: Ren Yubin <[email protected]> Co-authored-by: tony chen <[email protected]>
NervJS · Apr 9, 2022 · 93493fa · 93493fa
1 parent 3d4f6bd
commit 93493fa
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 27 deletions.
diff --git a/packages/taro-components-rn/src/components/Input/PropsType.tsx b/packages/taro-components-rn/src/components/Input/PropsType.tsx
@@ -34,6 +34,8 @@ export interface InputProps extends FormItemProps{
   cursor?: number;
   selectionStart: number;
   selectionEnd: number;
+  placeholderStyle?: string;
+  placeholderTextColor?: string;
   onInput?: (evt: Event) => void;
   onChange?: (evt: Event) => void;
   onFocus?: (evt: Event) => void;

diff --git a/packages/taro-components-rn/src/components/Input/index.tsx b/packages/taro-components-rn/src/components/Input/index.tsx
@@ -33,7 +33,7 @@ import {
   TextInputContentSizeChangeEventData,
   KeyboardTypeOptions
 } from 'react-native'
-import { noop, omit } from '../../utils'
+import { noop, omit, parseStyles } from '../../utils'
 import { InputProps, InputState } from './PropsType'
 
 const keyboardTypeMap: { [key: string]: string } = {
@@ -193,8 +193,8 @@ class _Input extends React.Component<InputProps, InputState> {
       _autoHeight,
       autoFocus,
       focus,
+      placeholderStyle,
     } = this.props
-
     const keyboardType: KeyboardTypeOptions = keyboardTypeMap[type] as KeyboardTypeOptions
 
     const selection = (() => {
@@ -210,30 +210,36 @@ class _Input extends React.Component<InputProps, InputState> {
     // fix: https://reactnative.dev/docs/textinput#multiline
     const textAlignVertical = _multiline ? 'top' : 'auto'
 
+    const placeholderTextColor = this.props.placeholderTextColor || parseStyles(placeholderStyle)?.color
+
+    const props = omit(this.props, [
+      'style',
+      'value',
+      'type',
+      'password',
+      'placeholder',
+      'disabled',
+      'maxlength',
+      'confirmType',
+      'confirmHold',
+      'cursor',
+      'selectionStart',
+      'selectionEnd',
+      'onInput',
+      'onFocus',
+      'onBlur',
+      'onKeyDown',
+      'onConfirm',
+      '_multiline',
+      '_autoHeight',
+      '_onLineChange',
+      'placeholderStyle',
+      'placeholderTextColor',
+    ])
+
     return (
       <TextInput
-        {...omit(this.props, [
-          'style',
-          'value',
-          'type',
-          'password',
-          'placeholder',
-          'disabled',
-          'maxlength',
-          'confirmType',
-          'confirmHold',
-          'cursor',
-          'selectionStart',
-          'selectionEnd',
-          'onInput',
-          'onFocus',
-          'onBlur',
-          'onKeyDown',
-          'onConfirm',
-          '_multiline',
-          '_autoHeight',
-          '_onLineChange'
-        ])}
+        {...props}
         defaultValue={value}
         keyboardType={keyboardType}
         secureTextEntry={!!password}
@@ -255,9 +261,14 @@ class _Input extends React.Component<InputProps, InputState> {
         textAlignVertical={textAlignVertical}
         onContentSizeChange={this.onContentSizeChange}
         underlineColorAndroid="rgba(0,0,0,0)"
-        style={[{
-          padding: 0,
-        }, style, _multiline && _autoHeight && { height: Math.max(35, this.state.height) }]}
+        placeholderTextColor={placeholderTextColor}
+        style={[
+          {
+            padding: 0
+          },
+          style,
+          _multiline && _autoHeight && { height: Math.max(35, this.state.height) }
+        ]}
       />
     )
   }

diff --git a/packages/taro-components/types/Input.d.ts b/packages/taro-components/types/Input.d.ts
@@ -35,6 +35,10 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 文字的颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
   /** 是否禁用
    * @supported weapp, h5, rn
    */