Question

我试图将文本输入居中，其宽度是文本输入的长度。但是，当我使用alignSelf：＆＃39; center＆＃39;或alignItems：＆＃39; center＆＃39;时，如果没有宽度，文本输入将不可见。

例如：

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

此处minWidth确保可以看到textInput，但在键入时不会展开。如果没有宽度/ 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/>
}

当文本输入接收输入时，它的大小会增加并且效果很好。但是，有一件事使它无法完全证明。表情符号的e.nativeEvent.layout.width值始终为20.并且给定表情符号的实际宽度不是20.因此，txtWidth不再是textInput的正确宽度，textInput的各个部分现在被截断。< / p>

有没有人为具有动态宽度的居中文本输入提出了一个很好的解决方案。我被困在这个问题太久了。如果需要，也很乐意提供清晰度。

谢谢！

Answer 1

抱歉让你久等了，终于有时间完成了这件事。使用View，Image和Text假冒TextInput。

第1步：更改时格式化文本

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

第二次设定：伪造TextInput

应该看起来像

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

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

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

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

在React Native中使用动态宽度居中TextInput

1 个答案: