在React Native的ScrollView中设置contentInset和contentOffset

Question

我试图让我的内容从React Native的顶部开始100 px.我试过了

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

您应该在ScrollView上使用contentContainerStyle¹属性marginTop。

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

即

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

Answer 2

类似填充的效果：

const OFFSET = 100
const ScrollViewTest = (props) => (
    <ScrollView>
        <View style={{ height: OFFSET }} />
        <Text>Test</Text>
    </ScrollView>
)

类似标题的效果：

const OFFSET = 100
const ScrollViewTest = (props) => (
    <View style={{ paddingTop: OFFSET }}>
        <ScrollView>
            <Text>Test</Text>
        </ScrollView>
    </View >
)