探索React Native的宝藏：AutoGrowTextInput

import React, { useState } from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
 
const AutoGrowingTextInput = ({ value, onChangeText, ...props }) => {
  const [height, setHeight] = useState(0);
 
  const onTextChange = (text) => {
    onChangeText(text);
    const lineHeight = 20; // 假设每行文本的高度是20
    const linesCount = (text.match(/\n/g) || []).length + 1;
    setHeight(linesCount * lineHeight);
  };
 
  return (
    <TextInput
      {...props}
      onChangeText={onTextChange}
      multiline
      style={[styles.input, { height }]}
      value={value}
    />
  );
};
 
const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    padding: 5,
    margin: 5,
  },
});
 
export default AutoGrowingTextInput;

这段代码定义了一个名为AutoGrowingTextInput的组件，它会根据输入的文本自动增高或减小TextInput的高度。这是一个很实用的功能，尤其是在需要输入多行文本的情况下。代码使用了React Hooks (useState) 来跟踪文本输入框的高度，并在文本变化时更新它。