javascript - 在 React Native 的 ScrollView 中设置 contentInset 和 contentOffset

Question

我试图让我的内容在 React Native 中从顶部开始 100 像素。我试过

const OFFSET = 100
const ScrollViewTest = (props) => (
  <ScrollView
    contentInset={{ top: OFFSET }}
    contentOffset={{ y: OFFSET }}
  >
    <Text>Test</Text>
  </ScrollView>
)

但是当我渲染屏幕时，它从 0 px 开始，但是如果我滚动一点，它会从顶部滚动到 100px 并停留在那里。

因此 React Native 似乎不会在初始化时触发 contentOffset 和 contentInset 属性。

我该如何解决这个问题？我也试过设置 automaticallyAdjustContentInsets={false} 没有任何变化。

此外，这些属性似乎仅适用于 iOS。 Android 是否有任何类似的属性？

Answer 1

您应该使用contentContainerStyle ¹ ScrollView 上带有 marginTop 的属性。

通过使用此属性，它将应用包装您的 child 的容器(我相信这就是您在这种情况下想要的)，并具有在 iOS 和 Android 上工作的额外好处。

即

const OFFSET = 100
const ScrollViewTest = (props) => (
  <ScrollView
    contentContainerStyle={{ marginTop: OFFSET }}
  >
    <Text>Test</Text>
  </ScrollView>
)