如何在React Native中使用translateX显示隐藏视图

Question

以下是代码：

<View
  style={{transform: [{translateX: this.state.translateX}], width: '120%'}}>
  <View style={{width: '20%'}}>{someText}</View>
  <View style={{width: '80%'}}>{someText}</View>
  <View style={{width: '20%'}}>{someText}</View>
</View>

this.state.translateX响应滑动手势，工作正常，前两个View确实移动但最后一个视图不可见（或未移动？）。我想在this.state.translateX更改时显示最后一个视图。但似乎没有正确呈现？

Answer 1

这是因为Android不会渲染屏幕外的元素。解决方案是将元素放在屏幕中position: 'absolute'，然后使用translateX将其隐藏在屏幕上。