在 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 像素开始，但是如果我滚动一点，它会从顶部滚动到 100 像素并保持在那里。

所以看起来 React Native 在初始化时不会触发contentOffset和contentInset属性。

我该如何解决这个问题？ 我也尝试过设置automaticallyAdjustContentInsets={false}而不做任何更改。

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

Answer 1

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

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

即

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

Answer 2

    componentDidMount(){
        if(Platform.OS==='ios'){
          this.refs._scrollView.scrollToOffset({animated:false,offset:-OFFSET});
        }
    }

    render(){
        return(
            <ScrollView
                ref="_scrollView"
                contentInset={{top: OFFSET}}
            ...>
               ...
           </ScrollView>
        )
    }

Answer 3

正如我在对 Peter Theill 解决方案的评论中所写的那样，这里提出的解决方案在 100% 的情况下都不起作用，例如对于以下情况之一：

1. 你有一个透明的标题，你希望内容在下面滚动（例如模糊的标题）。

您可以使用 Peter Theill 的解决方案解决此问题，并将contentContainerStyle替换为style={{paddingTop: headerHeight}} 。

但是，如果您还有以下典型情况，这将无济于事：

2. 您想使用 RefreshControl。 它将显示在标题后面，并且无法在 iOS 上对其进行不同的定位。 因此，您需要按照 Jamgreen 的建议使用 contentOffset 和 contentInset。 但是，我在初始渲染偏移时遇到了类似的问题。 在我的情况下，我使用 prop automaticallyAdjustContentInsets={false}解决了这个问题，所以我建议尝试这个！

这是我的场景中的完整解决方案（适用于 android 和 iOS）：

<ScrollView
    style={{paddingTop: Platform.select({android: headerHeight, ios: 0})}}
    scrollIndicatorInsets={{ right: 1 }}
    ref={scrollViewRef}
    contentInset={{ top: headerHeight}}
    contentOffset={{ x: 0, y: Platform.select({android: 0, ios: -headerHeight})}}
    automaticallyAdjustContentInsets={false}
    refreshControl={<RefreshControl
        refreshing={refresh}
        onRefresh={() => {
            setRefresh(true);
            setTimeout(() => setRefresh(false), 10000);
        }}
        colors={[inputPlaceholderGray]}
        tintColor={inputPlaceholderGray}
        progressViewOffset={headerHeight}
    />}
>
    {CONTENT}
</ScrollView>

希望它仍然可以帮助人们，尽管这个问题已经很老了。

Answer 4

当我尝试从 componentDidMount 方法调用 scrollTo 时，它不会滚动。 我必须使用 setTimeout 的解决方法才能使其工作：

componentDidMount() {
  setTimeout(() => this.refs._scrollView.scrollTo({ x: 100, y: 0 }) , 0);
}

Answer 5

填充效果：

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 >
)