react-native TextInput 剪辑文本

Question

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

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

代码是：

  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'
  }
};

开发环境：OSX10.12 本机反应：16.3.1 反应：0.55.4 平台：Android

见附件图片：

打字前：

输入后：

Answer 1

因此，一种骇人听闻的方法是通过状态设置宽度，假设最初宽度约为 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 = (text) => {
    let len = text.length
  
    this.setState((state) => {
        return {
          amount: text,
          flexibleWidth: (len * 16) + 27
          error:'
        }
    })
  }

Answer 2

经过多次修改，原来裁剪与自定义字体有关。替换字体可以解决问题。似乎在未设置宽度时扩展 TextInput 的默认行为正是我需要的。

Answer 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'
  }
};

react-native TextInput 剪辑文本

react-native TextInput clips text

android

textinput

reactjs

react-native