可将 TextInput 扩展到 react-native 中的最大行数

Question

我正在尝试制作一个 TextInput，用户可以在其中输入最多四行的文本。当 textinput 现在自动滚动时，用户可以继续输入文本。

const InputNoLabel = ({ value, onChangeText, placeholder, 
secureTextEntry, onContentSizeChange, height }) => {
const { inputStyle, containerStyle } = styles;
 return (
  <View style={containerStyle}>
  <TextInput
    underlineColorAndroid='transparent'
    secureTextEntry={secureTextEntry}
    placeholder={placeholder}
    autoCorrect={false}
    style={[inputStyle, { height }]} //height: height
    value={value}
    onChangeText={onChangeText}
    onContentSizeChange={onContentSizeChange}
    multiline={true}
    editable={true}
  />
 </View>
 );
};

onContentSizeChange 我手动更改容器的高度并传递一个新高度，但是当我达到最大高度时，我输入的任何更多文本都会被隐藏。

 <View style={rowContainer}>
     <InputNoLabel 
     label="Enter Text Here"
     placeholder="Name"
     onChangeText={this.onTextChange.bind(this)}
      /* value={this.state.value} */
      height={this.state.height}
      onContentSizeChange={this.onContentSizeChange.bind(this)}
     />
  </View >

 onContentSizeChange() {
    this.setState({
         height: Math.max(48, this.state.height + 16) 
     });
 }

如何让 TextInput 将输入的行数调整为最大行数，但也允许更多的输入，但这次只滚动文本

Answer 1

我看到这个问题已经存在一段时间了，但实际上并没有很好的答案，这是您可以使用的简单解决方法！

<TextInput
  multiline
  style={{ maxHeight: 200 }} // => The Magic
/>

检查我做的这个简单的小吃：snack.expo.io/@abranhe/stackoverflow-46851975

编码... ？

import React from 'react';
import { View, StyleSheet, TextInput as Input } from 'react-native';

export default () => (
  <View style={styles.container}>
    <Input
      autoFocus
      multiline
      style={styles.input}
      placeholder={'Enter your text!'}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    paddingTop: 100,
  },
  input: {
    borderRadius: 20,
    minHeight: 40,
    maxHeight: 200,
    margin: 20,
    padding: 20,
    borderWidth: 1,
  },
});

如果你想创建类似消息应用程序的东西，你可以使用这个包github.com/ardaogulcan/react-native-keyboard-accessory 并重用输入。

查看演示：snack.expo.io/@abranhe/input-keyword-accessory

源代码：

import React, { useState } from 'react';
import { KeyboardAccessoryView } from 'react-native-keyboard-accessory';
import { View, Button, TextInput, StyleSheet, ScrollView } from 'react-native';

export default () => {
  const [focus, setFocus] = useState(false);

  const renderInput = () => (
    <KeyboardAccessoryView alwaysVisible>
      <TextInput
        onBlur={() => setFocus(false)}
        autoFocus
        multiline
        style={styles.input}
        placeholder={'Enter your text!'}
      />
    </KeyboardAccessoryView>
  );

  return (
    <View style={styles.container}>
      <ScrollView>
        <Button title="Send a message" onPress={() => setFocus(true)} />
      </ScrollView>
      {focus ? renderInput() : <View />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    paddingTop: 30,
  },
  input: {
    margin: 5,
    minHeight: 40,
    maxHeight: 100,
  },
});