web-dev-qa-db-ja.com

React NativeのScrollViewでcontentInsetとcontentOffsetを設定します

Reactネイティブでコンテンツを上から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に同様のプロパティはありますか？

javascriptiosreact-nativereact-native-androidreact-native-ios
7
Jamgreen

contentContainerStyleを使用する必要があります1 ScrollViewのmarginTopを含むプロパティ。

このプロパティを使用することで、子供をラップするコンテナー（この場合はあなたが欲しいと思う）を適用し、iOSとAndroidの両方で作業できるという追加の利点があります。

つまり.

const OFFSET = 100
const ScrollViewTest = (props) => (
  <ScrollView
    contentContainerStyle={{ marginTop: OFFSET }}
  >
    <Text>Test</Text>
  </ScrollView>
)
7
Peter Theill
    componentDidMount(){
        if(Platform.OS==='ios'){
          this.refs._scrollView.scrollToOffset({animated:false,offset:-OFFSET});
        }
    }

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

ComponentDidMountメソッドからscrollToを呼び出そうとすると、スクロールしません。私はそれを機能させるためにsetTimeoutで回避策を使わなければなりません：

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

パディングのような効果：

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 >
)
0
Alexander Vitanov