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

polhcujo  于 2022-12-24  发布在  React
关注(0)|答案(5)|浏览(153)

我正在尝试做一个文本输入,用户可以输入文本最多说四行。用户可以继续输入文本,因为文本输入现在自动滚动。

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调整到最大输入行数,同时允许更多输入,但这次只滚动文本

jxct1oxe

jxct1oxe1#

我看到这个问题已经出现了一段时间,但它实际上没有一个好的答案,这是一个简单的变通办法,你可以使用!

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

plicqrtu2#

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

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

博览会live demo here

cgvd09ve

cgvd09ve3#

经过一番研究,我意识到这是一个挑战,在Android方面的React。我拿起组件,可以自动滚动在Android上。你可以克隆组件在这里MultilineTextInput。做一些更多的样式的textInput你可能希望。

zz2j4svz

zz2j4svz4#

在我例子中,我必须限制为numberOfLines={4},这就是我的解决方案

const [heightOnChange, setHeightOnChange] = useState(60);
//min height >>>> 60

<View style={{height: heightOnChange}}>
   <TextInput
      multiline={true}
      numberOfLines={4}
      onContentSizeChange={e => {
         if (e.nativeEvent.contentSize.height < 90) {
            setHeightOnChange(e.nativeEvent.contentSize.height + 20);
            //20 for padding
         }
      }}
   />
</View>

我想这对某些人会有帮助😜

mnemlml8

mnemlml85#

<TextInput maxLength = {5000}
                onChangeText={setInMessageText}
                placeholder={`Write a message`}
                value={inMessageText}
                multiline={true} //here
                style={{maxHeight: 100}}  //and here
              />

相关问题