wake-up-neo.com

Stellen Sie contentInset und contentOffset in ScrollView von React Native ein

Ich versuche, dass mein Inhalt in React Native 100 px von oben beginnt. Ich habe es mit versucht

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

Wenn ich den Bildschirm rendere, beginnt er jedoch mit 0 px, aber wenn ich ein wenig scrolle, wird er von oben nach oben auf 100 Pixel verschoben und bleibt dort.

Es scheint also, dass React Native die Eigenschaften contentOffset und contentInset bei der Initialisierung nicht auslöst.

Wie kann ich das beheben? Ich habe auch versucht, automaticallyAdjustContentInsets={false} ohne Änderungen einzustellen.

Es scheint auch, dass diese Eigenschaften nur für iOS gelten. Gibt es ähnliche Eigenschaften für Android?

javascriptiosreact-nativereact-native-androidreact-native-ios
5
Jamgreen

Sie sollten die contentContainerStyle verwenden.1 Eigenschaft mit einer marginTop in Ihrem ScrollView.

Wenn Sie diese Eigenschaft verwenden, wird der Container angewendet, der Ihre Kinder einwickelt (was ich für das, was Sie in diesem Fall wollen) und den zusätzlichen Vorteil der Arbeit mit iOS und Android bietet.

Das heißt.

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

Wenn ich versuche, scrollTo von der ComponentDidMount-Methode aufzurufen, wird kein Bildlauf durchgeführt. Ich muss Workaround mit setTimeout verwenden, damit es funktioniert:

componentDidMount() {
  setTimeout(() => this.refs._scrollView.scrollTo({ x: 100, y: 0 }) , 0);
}
0
yuanwy
    componentDidMount(){
        if(Platform.OS==='ios'){
          this.refs._scrollView.scrollToOffset({animated:false,offset:-OFFSET});
        }
    }

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

polsterungseffekt:

const OFFSET = 100
const ScrollViewTest = (props) => (
    <ScrollView>
        <View style={{ height: OFFSET }} />
        <Text>Test</Text>
    </ScrollView>
)

header-ähnlicher Effekt:

const OFFSET = 100
const ScrollViewTest = (props) => (
    <View style={{ paddingTop: OFFSET }}>
        <ScrollView>
            <Text>Test</Text>
        </ScrollView>
    </View >
)
0
Alexander Vitanov