Question

我试图将一个视图水平居中放在屏幕上，如下所示：

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

     <TextInput/>

 </Animated.View>

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

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

有人知道可能导致此误差范围的原因吗？3.8会返回一个看似准确的浮点数。是否可能是除法运算引入了舍入误差？

Answer 1

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

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

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

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

1 个答案: