在左侧为 Android 剪切了 <TextInput>（粗体文本错误）

Posted 2023-04-18

【中文标题】在左侧为 Android 剪切了 <TextInput>（粗体文本错误）

【英文标题】：Cutted <TextInput> on left for Android (BOLD text bug)

【发布时间】：2021-02-17 00:04:30

【问题描述】：

我有 react-native TextInput，如果我输入长字符串，它会自动增长。在 ios 上它按预期工作，但在 android 上，它在 5-7 个字符后开始切断左侧。字符串越长 - 截断越大。我试图删除边距和填充 - 没有变化。我查看了文档中的道具 - 还没有找到解决方案。我可以滚动查看被截断的字符串，但我希望不滚动查看它，除非没有更多空间可以增长。

          <TextInput
            key=key
            style=
                flex:1, 
                fontSize: '1.2rem',
                fontWeight: 'bold',
            
            value=this.state.value
            onChangeText=this._onChangeText
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            autoCompleteType='off' // Android
            autoCorrect=false // iOS
            contextMenuHidden=true
            importantForAutofill="no"
            keyboardAppearance="dark"
            maxLength=150
            returnKeyType=returnKeyType
            spellCheck=false
            keyboardType=Platform.OS==='ios'
              ?'default'
              :"visible-password" // to disable autocorrect suggestions on android
             
          />

【参考方案1】：

在 TextInput 元素上将 textBreakStrategy 设置为 simple 似乎也适用于某些设备。

基本上这是与系统字体的冲突，所以你可以为你的文本输入指定一些其他的fontFamily。更多技巧可以在左侧添加一些额外的空间

【参考方案2】：

当我准备问题时，我发现设置 fontWeight: 'bold' 会导致此问题。但我仍在研究如何使其与粗体文本一起使用（如果可能的话）。

我试图找到一个没有粗体属性的粗体字体，但它的行为是一样的......所以看起来 TextInput 只能使用默认字体正常工作，没有粗体属性，这很不方便。

github上的问题：https://github.com/facebook/react-native/issues/30317