fix(TextArea):修改TextArea根据内容自动调整高度

Author: huqiaoli

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

@@ -14,6 +14,7 @@ export default class TextAreaView extends Component<TextAreaProps> {
     value1: '只读状态不可输入',
     value3: '自定义输入框样式',
     value4: '',
+    value5: '',
   };
 
   render() {
@@ -35,6 +36,16 @@ export default class TextAreaView extends Component<TextAreaProps> {
                 placeholder="默认提示语"
               />
             </Card>
+            <Card title="根据内容自动调整高度" style={styles.card}>
+              <TextArea
+                onChange={(value5: string) => {
+                  this.setState({value5});
+                }}
+                value={this.state.value5}
+                placeholder="默认提示语"
+                autoSize
+              />
+            </Card>
             <Card title="展示字数" style={styles.card}>
               <TextArea
                 onChange={(value4: string) => {

packages/core/src/TextArea/README.md

@@ -112,6 +112,29 @@ function Demo() {
 export default Demo
 ```
 
+### 根据内容自动调整高度
+
+```jsx  mdx:preview
+import React, { useState } from 'react';
+import TextArea from '@uiw/react-native/lib/TextArea';
+
+function Demo() {
+  const [value, setValue] = useState('')
+
+  return (
+    <TextArea
+      value={value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      placeholder='请输入'
+      autoSize
+    />
+  )
+}
+export default Demo
+```
+
 ### 自定义输入框样式
 ```jsx  mdx:preview
 import React, { useState } from 'react';

packages/core/src/TextArea/index.tsx

@@ -11,6 +11,9 @@ import {
   Text,
   TextInput,
   TextStyle,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+  TextInputContentSizeChangeEventData,
 } from 'react-native';
 import Icon, { IconsName } from '../Icon';
 
@@ -30,13 +33,15 @@ export interface TextAreaProps extends ViewProps {
   /** 是否禁用 */
   editable?: boolean;
   /** 文本域内容变化时触发 */
-  onChange?: (val: string) => void;
+  onChangeText?: (val: string) => void;
   /** 文本框中的文字内容 */
   value?: string;
   /** 是否展示字数 */
   showWords?: boolean;
   /** 输入框文字样式 */
   fontStyle?: StyleProp<TextStyle>;
+  /** 自适应内容高度 */
+  autoSize?: boolean;
 }
 
 function TextArea(props: TextAreaProps) {
@@ -45,28 +50,46 @@ function TextArea(props: TextAreaProps) {
     placeholder = '',
     placeholderTextColor = '#989FB2',
     numberOfLines = 30,
-    onChange = () => {},
+    onChangeText = () => {},
     maxLength = 50,
     value = '',
     editable = true,
     showWords = false,
+    autoSize = false,
     style,
     fontStyle,
     ...other
   } = props;
 
+  const [defaultText, setDefaultText] = useState<string>('');
+  const [height = 0, setHeight] = useState<number>(0);
+
+  const onChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
+    if (autoSize) {
+      setDefaultText(event.nativeEvent.text);
+    }
+  };
+
+  const onContentSizeChange = (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    if (autoSize) {
+      setHeight(event.nativeEvent.contentSize.height);
+    }
+  };
+
   return (
     <View style={StyleSheet.flatten([styles.viewBody, style])}>
       <View style={styles.bodyLayout}>
         <TextInput
-          style={[styles.TextInput, fontStyle]}
+          style={[styles.TextInput, fontStyle, { height: Math.max(35, height) }]}
           multiline={true}
           textAlignVertical={textAlignVertical}
           placeholder={placeholder}
           placeholderTextColor={placeholderTextColor}
           numberOfLines={numberOfLines}
           maxLength={maxLength}
-          onChangeText={onChange}
+          onChangeText={onChangeText}
+          onChange={onChange}
+          onContentSizeChange={onContentSizeChange}
           editable={editable}
           value={value}
           {...other}
@@ -79,7 +102,7 @@ function TextArea(props: TextAreaProps) {
 
 const styles = StyleSheet.create({
   viewBody: {
-    height: 100,
+    // height: 100,
     marginHorizontal: 10,
     borderColor: 'gray',
     borderWidth: 0.2,
@@ -88,13 +111,13 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   bodyLayout: {
-    height: '100%',
-    flexDirection: 'column',
+    // height: '100%',
+    // flexDirection: 'column',
     justifyContent: 'space-between',
     padding: 10,
   },
   TextInput: {
-    height: '80%',
+    height: '100%',
   },
   textWords: {
     padding: 0,