react-native - 在 React Native 中使用多行自动增长文本输入

Question

我创建了一个自定义组件，它在 View 中包含一个 TextInput 和一个 Icon。当 TextInput 有多行时，我想增加我的 View 高度。这是我的组件。我怎样才能做到这一点？

import React from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { InputIcon } from "../";

const commentInput = props => (
  <View style={styles.inputContainer}>
    <TextInput
      {...props}
      underlineColorAndroid="transparent"
      style={[
        styles.input,
        { fontSize: props.fontSize },
        props.style,
        !props.valid && props.touched ? props.invalidInput : null
      ]}
    />
    <InputIcon
      name="upload"
      size={30}
      color="gray"
      onPress={props.onPress}
      disabled={props.disabled}
    />
  </View>
);

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: "row",
    alignSelf: "center",
    width: "96%",
    marginLeft: 2,
    marginRight: 2,
    marginBottom: 10,
    height: 50,
    borderRadius: 50,
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "gray"
  },
  input: {
    width: "90%",
    textAlign: "center",
    color: "gray"
  },
  icon: {
    marginTop: 18,
    paddingRight: 5
  }
});

导出默认commentInput；

Answer 1

您可以将 multiline 与 minHeight 属性结合使用来实现此效果。

相关代码为

<TextInput
     multiline //... to enable multiline

<InputIcon
     style={{alignSelf: 'center'}} //... Should be self centered

inputContainer: {
        marginTop:100,
        flexDirection: "row",
        alignSelf: "center",
        width: "96%",
        marginLeft: 2,
        marginRight: 2,
        marginBottom: 10,
        minHeight: 50, //... For dynamic height
        borderRadius: 50,
        backgroundColor: "transparent",
        borderWidth: 1,
        borderColor: "gray",
        paddingLeft: 10, //... With respect to the min height, so that it doesn't cut
        paddingTop: 10, //... With respect to the min height, so that it doesn't cut
        paddingBottom: 10 //... With respect to the min height, so that it doesn't cut
    },