如何在文本输入中向右移动文本(React Native)

Posted

技术标签:

【中文标题】如何在文本输入中向右移动文本(React Native)【英文标题】:How to move text right in Text Input (React Native) 【发布时间】:2022-01-20 23:39:22 【问题描述】:

我想通过将 border radius 添加到文本输入来设置我的应用程序的样式,我观察到输入中的文本超出了 corners 我该怎么做向右移动。

这是文本输入代码

<TextInput
    placeholder="Username"
    placeholderTextColor="rgba(0,0,0,0.6)"
    maxLength=35
    style=styles.input
/>

这是样式代码

input: 
    backgroundColor: '#ccc',
    height: 50,
    width: 320,
    alignSelf: 'center',
    borderRadius: 50,
    textAlign: 'left',
    marginTop: 35,

    fontSize: 18,
    fontFamily: 'oswald',
    fontStyle: 'bold',
    color: 'black',
  

【问题讨论】:

【参考方案1】:

您可以在输入中添加填充,这将为您提供所需的空间。

input: 
    paddingHorizontal: 5px,
    backgroundColor: '#ccc',
    height: 50,
    width: 320,
    alignSelf: 'center',
    borderRadius: 50,
    textAlign: 'left',
    marginTop: 35,

    fontSize: 18,
    fontFamily: 'oswald',
    fontStyle: 'bold',
    color: 'black',
  

您也可以只使用填充而不是 paddingHorizontal,但这会增加输入的高度

【讨论】:

谢谢@Thales_Kenne 我的荣幸!如果这对您有帮助,请接受答案。

以上是关于如何在文本输入中向右移动文本(React Native)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native 中向图像添加文本?

在 ScrollView 中向右对齐视图

React-Native做一个文本输入框组件

如何在UITextView中以编程方式移动光标?

如何在 UIAlertController 中向 UITextField 添加边距?

在 PyQt5 中将 QsciScintilla 的文本光标向左或向右移动