无法使用 React Native Dimensions 将 <TextInput> 光标定位到屏幕的水平中心答案

【问题标题】：Unable to position <TextInput> cursor to the horizontal center of screen with React Native Dimensions无法使用 React Native Dimensions 将 <TextInput> 光标定位到屏幕的水平中心
【发布时间】：2017-09-05 21:24:48
【问题描述】：

我正在尝试保持视图在屏幕上水平居中，如下所示：

  <Animated.View style={{
     position: 'absolute',
     top: '35%',
     width: '30%',
     marginLeft: this.state.center,
  }}>

     <TextInput/>

 </Animated.View>

它基本上通过在键入时将marginLeft 值减少固定数量并在删除时增加marginLeft 来保持<TextInput/> 居中作为用户键入。当<TextInput/> 为空时，闪烁的光标只是保持在屏幕的水平中心。

我遇到的问题是，当center = Dimensions.get('window').width / 2 应用于<Animated.View> 的marginLeft 样式属性时，它并不完全位于屏幕的中心点。大约是3.8 DPI 偏右。

有谁知道是什么导致了这个误差范围？Dimensions.get('window').width 返回一个看起来很精确的浮点数.. 会不会是除法运算导致了舍入误差？

【问题讨论】：

标签： css react-native

【解决方案1】：

毕竟这不是Dimensions 的问题。在这种特殊情况下，<TextInput/> 似乎自动将自己的位置向右调整了一个近似值PixelRatio.get() dpi。接下来我需要偏移的是光标宽度本身，即1。

所以要获得<TextInput/> 光标的屏幕“中心点”：

var windowCenterPoint = (Dimensions.get('window').width / 2) - PixelRatio.get() - 1;

【讨论】：