在React Native的ScrollView中设置contentInset和contentOffset

问题描述：

我试图让我的内容从React Native的顶部开始100px。我曾尝试与在React Native的ScrollView中设置contentInset和contentOffset

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

但是，当我呈现在屏幕上，它从0开始像素，但如果我滚动了一下，它会从顶部滚动为100px，呆在那里。

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

我该如何解决这个问题？我也尝试过设置automaticallyAdjustContentInsets={false}，但没有任何更改。

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

答

填充般的效果：

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

但是，如果，代替' ..'具有''用'RefreshControl' ，刷新按钮将在填充状效果之前，而不是在列表之上，所以我不能完成相同的操作： – Jamgreen

有趣的溢出：“隐藏”将在这个案例 –

答

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

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

在React Native的ScrollView中设置contentInset和contentOffset

相关推荐