在 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 开始，但如果我稍微滚动一下，它会从顶部滚动到 100 px 并停留在那里。

所以 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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

1. 您想使用 RefreshControl。它将显示在标题后面，并且无法在 iOS 上进行不同的定位。因此，您需要按照 Jamgreen 的建议使用 contentOffset 和 contentInset。但是，我在偏移量的初始渲染中遇到了类似的问题。我用道具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 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 >
)