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

    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％的情况下均无法使用，例如对于以下情况之一：

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

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

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

您要使用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 4

类似填充的效果：

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

Answer 5

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

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

在React Native的ScrollView中设置contentInset和contentOffset

5 个答案: