react-native - 具有自定义文本子样式的 React-native TextInput

Question

我有一个输入，我可以在其中输入一个单词，当我按空格键时，它会变成一个带有自定义设计的标签，如您在屏幕截图中看到的那样。

我希望用户能够将输入的光标从末尾移动到另一个标签的中间来编辑它。所以我决定在输入中渲染标签，以便光标可以轻松地在它们之间移动。

我的问题是我找不到在输入中使用自定义样式显示文本的方法。正如您在屏幕截图中看到的那样，我的标签应该有背景颜色、边框半径、填充，但是我找不到通过直接在我的输入呈现的文本中添加这种样式来显示它的方法。

我试图用视图包装该文本，但这也导致了问题，没有应用文本的样式。

片段重现：

  const [tagInput, setTagInput] = useState('#');

….

  <TextInput
     onChangeText={(value:string) => setTagInput(value)}>
          
     <Text 
      style={{
         backgroundColor: '#445692',
         borderWidth: 1, // has no effect
         borderColor: 'green', // has no effect
         borderRadius: 12, // has no effect
         padding: 10,       // has no effect 
         color: 'white',
         fontWeight: 'bold',
    }}>
     {tagInput}
    </Text>
 </TextInput>

我想知道我是否遗漏了什么或者输入不允许这些样式属性？我应该以另一种方式实现这一目标吗？

标签： react-nativestylesreact-native-textinput