react-native TextInput 剪辑文本

Posted 2023-04-18

【中文标题】react-native TextInput 剪辑文本

【英文标题】：react-native TextInput clips text

【发布时间】：2018-11-23 13:21:54

【问题描述】：

我正在尝试创建一个可展开的文本视图。我试过使用TextInput 的onChangeContentSize 属性，但它不会更新宽度。如果我没有明确设置宽度，TextInput 的内容会在我键入时扩展，这是所需的行为，但随着文本的增长，它会开始剪切/隐藏文本。

希望这个问题可以通过样式来解决，但到目前为止我还没有做到。这几乎就像我需要能够设置一个不存在的溢出道具。

代码是：

  render() 

    console.log(this.state.width)
    let inputStyle = 
        color: '#fff',
        // width: this.state.width,
        fontSize: 60,
        lineHeight: 60,
        fontFamily: 'GT-Walsheim-Bold'
    

      return (
        <View style=styles.containerStyle>
          <Text style=styles.labelStyle>this.props.label</Text>
          <TextInput
            secureTextEntry=this.props.secureTextEntry
            placeholder=this.props.placeholder
            autoCorrect=false
            style=inputStyle
            value=this.props.value
            onChangeText=this.props.onChangeText
            autoFocus=true
            autoCapitalize=this.props.capitalize
          />
        </View>
      );
  

const styles = 

  labelStyle: 
    fontSize: 36,
    fontFamily: 'GT-Walsheim-Bold'
  ,
  containerStyle: 
    height: 200,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  
;

开发环境：OSX 10.12 反应原生：16.3.1 反应：0.55.4 平台：安卓

查看附件图片：

输入前：

输入后：

【参考方案1】：

经过多次修改，发现剪辑与自定义字体有关。替换字体可以解决问题。当没有设置宽度时，扩展 TextInput 的默认行为似乎完全符合我的需要。

【参考方案2】：

因此，一种骇人听闻的方法是通过状态设置宽度，假设最初宽度约为 20 像素（取决于您的字体），然后对于每个添加的字符，您将添加 16 像素（取决于您的字体）到宽度。

例子：-

          <TextInputCustom
              style=[
                fontSize: 34,
                width:this.state.flexibleWidth// intially 27px
                textAlign: 'center',
                fontWeight: "bold",
                fontStyle: "normal",
                letterSpacing: -0.31,
                color: Colors.BLACK]
              isUnderlineRequired=false
              onChangeText=(text) => this.checkInteger(text)
              placeholder="0"
              returnKeyLabel="done"
              keyboardType="numeric"
              maxLength=10
              value=this.state.amount + ""
              ref="input"
            />

checkInteger 函数

  checkInteger = (text) => 
    let len = text.length
  
    this.setState((state) => 
        return 
          amount: text,
          flexibleWidth: (len * 16) + 27
          error:'
        
    )
  

【讨论】：

谢谢，我试过类似的东西，但不幸的是我输入的是文本而不是整数，所以没有可靠的方法来根据每个字符添加宽度，所以它最终是有点随机，因为没有可靠的方法来测量文本的宽度

【参考方案3】：

我刚刚遇到了同样的问题，如果您将 <Text />（当然还有您的样式+字体）组件作为 <TextInput /> 的子组件传递，它应该可以工作。

class MyComponent extends React.PureComponent 
  render () 

    console.log(this.state.width)
    let textStyle = 
        color: '#fff',
        // width: this.state.width,
        fontSize: 60,
        lineHeight: 60,
        fontFamily: 'GT-Walsheim-Bold'
    

    return (
      <View style=styles.containerStyle>
        <Text style=styles.labelStyle>this.props.label</Text>
        <TextInput
          secureTextEntry=this.props.secureTextEntry
          placeholder=this.props.placeholder
          autoCorrect=false
          style=inputStyle
          onChangeText=this.props.onChangeText
          autoFocus=true
          autoCapitalize=this.props.capitalize
        >
          <Text>this.props.value</Text>
        </TextInput>
      </View>
    );
  


const styles = 
  labelStyle: 
    fontSize: 36,
    fontFamily: 'GT-Walsheim-Bold'
  ,
  containerStyle: 
    height: 200,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  
;

【讨论】：

您将无法使用此方法选择文本或移动光标