Question

我创建了一个自定义组件，其中包含View中的TextInput和Icon。当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
  }
});

导出默认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
    },

Answer 2

您的用例似乎与任何聊天输入字段类似。最简单的解决方案是在TextInput字段中添加http://127.0.0.1:9200/esidx_json_gs_entry/_doc/1/_termvectors。我假设您不想增加图像的高度。如果您想这样做，那么您可以在TextInput字段上添加multiline=true，然后以编程方式更新imageView的高度。您可以参考这个非常着名的开源聊天解决方案来获取示例代码， https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/InputToolbar.js

自动增长文本输入与多行反应原生

2 个答案: