android - react-native TextInput 剪辑文本

Question

我正在尝试创建一个可扩展的文本视图。我试过使用 的onChangeContentSize属性TextInput，但它不会更新宽度。如果我没有明确设置宽度，则内容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 react-native：16.3.1 react：0.55.4 平台：Android

见附图：

打字前：

输入后：

标签： androidreactjsreact-nativetextinput

Answer 1

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