在 React Native 中以动态宽度居中 TextInput

Question

我正在尝试使文本输入居中，其宽度是文本输入的长度。但是，当我使用 alignSelf: 'center' 或 alignItems: 'center' 时，文本输入在没有宽度的情况下是不可见的。

例如：

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

这里的 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/>
}

随着文本输入接收输入，它的大小会变大并且效果很好。然而，有一件事阻止了它被充分证明。 emoji 的 e.nativeEvent.layout.width 值始终为 20。给定 emoji 的实际宽度不是 20。因此 txtWidth 不再是 textInput 的正确宽度，并且 textInput 的片段现在被切断。

有没有人为具有动态宽度的居中文本输入提出一个好的解决方案。我已经被这件事难住了太久了。如果需要，也很乐意提供说明。

谢谢！

Answer 1

抱歉让你久等了，终于有时间完成这个了。使用View、Image 和Text 来伪造TextInput。

• 第一步：更改时格式化文本

您仍然需要TextInput。 文字中的表情符号可能看起来像:fire: 或?，我选择后者。 当文本更改时，使用正则表达式将所有表情符号表达式替换为表情符号字符。 然后你移动光标它不会在表情符号内停止

• 第二套：伪造TextInput

应该是这样的

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
  <Image style={styles.img} source={{uri: some_emoji}} />
  <Text>
    {"s"}
  </Text>
  <Text>
    {"s"}
  </Text>
  <MyCursor />
</View>

表情符号图像应该在相同的宽度内，并且要获得文本的宽度可能看起来像

<Text onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout;
}} />

然后您可以获得总长度并调整您的View 的大小并隐藏您的真实TextInput 并管理光标，它在网络上工作虽然不是那么顺利。 这就是为什么我为每个字符使用Text，例如<Text>{"s"}</Text>，当您单击每个字符以及发生焦点、模糊和按键时，光标索引应该会发生变化。您可以参考https://github.com/postor/react-input-emoji/blob/master/pages/index.js 获取我尝试过的网络版虚假输入，但剪切、粘贴和很多事情仍未处理