Javascript 在React Native中使用动态宽度对中文本输入

我正在尝试以文本输入的长度为宽度将文本输入居中。但是，当我使用alignSelf:“居中”或alignItems:“居中”时，如果没有宽度，文本输入将不可见

例如：

render() {
  return <View style={{flex: 1}}>
    <TextInput style={{alignSelf: 'center', minWidth: 1}}>
  <View/> 
}

render（）{
返回
}

在这里，minWidth确保可以看到textInput，但当您键入时它不会展开。如果没有width/minWidth，则除非删除居中样式，否则将无法看到textInput

具有几乎可行的解决方法的示例：

constructor(props) {
  super(props)

  this.state = {
    txt: ""
    txtWidth: 0
  }
}

render() {
  return <View style={{flex: 1}}>
    <TextInput
      style={{minWidth: 1, alignSelf: 'center', width: this.state.txtWidth}}
      value={this.state.txt}
      onChange={txt=>this.setState({txt: txt.nativeEvent.text})}
    />
    <Text
      style={{position: 'absolute', right: 100000}}
      onLayout={e=>this.setState({txtWidth:e.nativeEvent.layout.width})}
    >
      {this.state.txt}
    </Text>
  <View/>
}

构造函数（道具）{
超级（道具）
此.state={
txt:“
txtWidth:0
}
}
render（）{
返回
this.setState（{txt:txt.nativeEvent.text}）
/>
this.setState（{txtWidth:e.nativeEvent.layout.width}）
>
{this.state.txt}
}

当文本输入接收到输入时，它的大小会增加，效果会更好。然而，有一件事阻碍了它的充分证明。表情符号的e.nativeEvent.layout.width值始终为20。并且给定表情符号的实际宽度不是20。因此，txtWidth不再是textInput的正确宽度，textInput的片段现在被切断

有没有人想出了一个好的解决方案，以动态宽度为中心的文本输入。我在这个问题上被难倒太久了。如果需要的话，我们也很乐意提供清晰的信息

---

谢谢

抱歉让你久等了，终于有时间完成了。使用

查看

、

图像

和

文本

来伪造

文本输入

• 第一步：更改文本格式

您仍然需要一个

TextInput

。

---

文本中的表情符号可能看起来像

：fire:

或

regex emoji和calc您的输入宽度我仍然希望能够允许表情符号，这样regexing（和删除）就不会完全修复我的解决方案。但是好建议！我的意思是保留你的表情符号，稍后我会发布一个答案我需要管理cusor，所以可能不会这么快。尝试了一下，但最终放弃了。处理所有伪造文本输入的情况是非常令人畏惧的，特别是当我想要的只是一个中心文本输入（疯狂的是，这是一个问题，或者更多的人不需要），我会继续并将其标记为正确的，因为您的解决方案可能需要足够的努力。谢谢你的帮助