Question

如果将multiline设置为true，React Native将接受TextInput中的无限行，有maxLength但它只是限制了最大字符数，那么如何在TextInput上设置最大行？

Answer 1

我为应用程序实现了以下组件我是所有者。它仅在受限制的环境中进行测试，因此可能需要根据您的需要进行调整。我在这里分享，希望它能帮助社区。

react-native：0.46.3

import React, { Component } from 'react'
import { TextInput, Platform } from 'react-native'

const iosTextHeight = 20.5
const androidTextHeight = 20.5
const textHeight = Platform.OS === 'ios' ? iosTextHeight : androidTextHeight

class TextInputLines extends Component {
  state = { height: textHeight * 2, lines: 1 }

  componentWillReceiveProps (nextProps) {
    if (nextProps.value === '') {
      this.setState({ height: textHeight * 2, lines: 1 })
    }
  }

  render () {
    const {style, value, placeholder, numberOfLines = 8, autoFocus = true, onChangeText} = this.props

    return (
      <TextInput
        style={[style, { height: this.state.height }]}
        multiline
        autoFocus={autoFocus}
        value={value}
        placeholder={placeholder}
        onChangeText={(text) => onChangeText(text)}
        onContentSizeChange={(event) => {
          const height = Platform.OS === 'ios'
            ? event.nativeEvent.contentSize.height
            : event.nativeEvent.contentSize.height - androidTextHeight
          const lines = Math.round(height / textHeight)
          const visibleLines = lines < numberOfLines ? lines : numberOfLines
          const visibleHeight = textHeight * (visibleLines + 1)
          this.setState({ height: visibleHeight, lines: visibleLines })
        }}
        underlineColorAndroid='transparent'
      />
    )
  }
}

export default TextInputLines

使用方法：

import TextInputLines from './TextInputLines'

在render（）方法中：

<TextInputLines
   style={textStyle}
   autoFocus={true}
   value={this.state.value}
   placeholder={textPlaceholder}
   onChangeText={onChangeText}
   numberOfLines={10}
/>

Answer 2

您可以使用maxHeight和minHeight来接受您想要的内容。对于标准文本fontSize，给出maxHeight={60}将使TextInput在3行之后可滚动。这对IOS很有用 - 对于Android，你可以使用numberOfLines prop。

Answer 3

我认为你不能在iOS上使用。如前所述，Android拥有道具numberOfLines。我能想到的最接近的是尝试估算输入的宽度并根据该维度限制字符，但我认为这可能是一条黑暗的道路。

如果您选择这样做，有人会尝试获取行数here。 onLayout函数的组合可以获得TextInput的宽度，onChangeText的组合可以限制它。

Answer 4

似乎没有道具或包快速实现检查行数，所以我使用javascript函数match从TextInput获取数字，然后如果数字达到最大值，做一些限制它。< / p>

Answer 5

numberOfLines在android中也不是什么

您可以这样做

处于组件状态

PlatformException(ad_not_loaded, show failed for rewarded video, no ad was loaded, null)

在JSX TextInput声明中

this.state = {height: 35};

Answer 6

我创建了一个简单的版本来扩展TextInput以提供maxLines功能。

import React, { Component } from "react";
import { TextInput } from "react-native";
import PropTypes from "prop-types";

export default class MultiLine extends Component {
  static propTypes = {
    maxLines: PropTypes.number
  };

  constructor(props) {
    super(props);
    this.state = {
      value: props.value || ""
    };
  }

  onChangeText = text => {
    const { maxLines, onChangeText } = this.props;
    const lines = text.split("\n");

    if (lines.length <= (maxLines || 1)) {
      onChangeText(text);
      this.setState({ value: text });
    }
 };

 render() {
   const { onChangeText, multiline, value, ...other } = this.props;
   return (
     <TextInput
       {...other}
       multiline={true}
       value={this.state.value}
       onChangeText={this.onChangeText}
     />
   );
 }
}

一个例子：

<Multiline
  value={this.state.testeText}
  maxLines={10}
  onChangeText={text => {
    this.setState({ testeText: text });                
  }}
/>

Answer 7

我使用maxHeight，numberOfLine和多线道具解决了极限问题

setDescription（t）} multiline = {true} style = {{margin：10，borderRadius：20，padding ：5，borderWidth：1}} />

React Native限制TextInput中的行

7 个答案: