react-native TextInput 剪辑文本

Question

我正在尝试创建一个可展开的文本视图。我试过使用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 平台：安卓

查看附件图片：

输入前：

输入后：

Answer 1

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

Answer 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:'
        }
    })
  }

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