Question

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

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

代码是：

TextInput

Dev Env：OSX 10.12 反应原生：16.3.1 反应：0.55.4 平台：Android

见附图：

在输入之前：

输入后：

Answer 1

经过多次修补后，事实证明裁剪与自定义字体有关。替换字体可以解决问题。当没有设置宽度时，似乎扩展的TextInput的默认行为正在完全满足我的需要。

Answer 2

所以其中一种黑客方法是通过状态设置宽度，假设最初宽度大约为20像素（取决于你的字体），然后对于每个字符的添加，你将添加16px（取决于你的字体）到宽度。

实施例： -

＆＃13;

          <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"}
            />

＆＃13;

checkInteger功能

＆＃13;

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

＆＃13;

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剪辑文本

3 个答案: