在本机反应中使用多行自动增长文本输入

Question

我创建了一个自定义组件，其中在视图内包含文本输入和图标。当 TextInput 具有多行时，我想增加视图高度。这是我的组件。我怎样才能实现这个目标？

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
  }
});

导出默认评论输入；

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
    },

Answer 2

您的用例似乎与任何聊天输入字段类似。最简单的解决方案是在 TextInput 字段中添加

multiline=true

。我假设您不想增加图像的高度。如果你想这样做，那么你可以在 TextInput 字段上添加一个

onContentSizeChange

，然后以编程方式更新 imageView 的高度。 您可以参考这个非常著名的开源聊天解决方案的示例代码， https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/InputToolbar.js

Answer 3

我发现了自动提高 Textinput 高度的最佳方法。

<View style={styles.textInputViewWriteSomethingContainer}>
            <TextInput
              style={styles.textInputViewWriteSomething}
              placeholder={Constants.WRITE_SOMETHING}
              placeholderTextColor={COLORS.TEXT_GRAY}
              multiline
            />
          </View>

风格=

    textInputViewWriteSomething: {
    flex: 1,
    color: COLORS.Black,
    paddingEnd: 10,
    paddingStart: 10,
    fontSize: FONTSIZE.size_14,
    fontFamily: FontStrings.AVERIA_REGULAR,
  },
  textInputViewWriteSomethingContainer: {
    flexDirection: "row",
    flex: 1,
    backgroundColor: COLORS.POST_INPUT_BOX_BACKGROUND,
    maxHeight: 150,
    minHeight: 40,
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
  },

如果您按照此操作，我希望您能找到所需的解决方案。