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

Answer 2

经过一番研究，我意识到这是Android方面的反应挑战。我选择了可以在android上自动滚动的组件。您可以在此处克隆组件 MultilineTextInput。如你所愿，为textInput做一些更多的样式。

Answer 3

我有一个非常简单的解决方案，只需更少的代码和跨平台的方法。

<View style={{ maxHeight: 100 }}> // 100 is sufficient for me
  <TextInput
     placeholder="Enter here"
     multiline={true}
     textAlignVertical="top"
  />
</View>

博览会live demo here

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

3 个答案: