Set contentInset und contentOffset in Reagieren Native ScrollView

Ich versuche, meine Inhalte beginnen 100 px von oben Reagieren Nativen. Ich habe versucht mit

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

Aber wenn ich render den Bildschirm, es startet von 0 px, aber wenn ich scrolle ein wenig, es wird ein Bildlauf um 100 Pixel von oben und dort bleiben.

So scheint es, Reagieren Nativen doen nicht auslösen contentOffset und contentInset Eigenschaften bei der Initialisierung.

Wie kann ich dieses Problem beheben? Ich habe auch versucht die Einstellung automaticallyAdjustContentInsets={false} mit keine änderungen.

Auch, es scheint, daß diese Eigenschaften sind für iOS nur. Gibt es irgendwelche ähnlichen Eigenschaften für Android?

InformationsquelleAutor Jamgreen | 2017-09-25

  1. 4

    Sollten Sie die contentContainerStyleEins - Eigenschaft mit einer marginTop auf Ihre ScrollView.

    Durch die Verwendung dieser Eigenschaft so gilt es für die container-Verpackung Ihre Kinder (die ich glaube, ist, was Sie wollen, in diesem Fall) und mit dem zusätzlichen Vorteil der Zusammenarbeit auf beiden iOS und Android.

    I. e.

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

    InformationsquelleAutor Peter Theill

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

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

    InformationsquelleAutor James Kuang

  3. 0

    Polsterung-Effekt:

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

    header-Effekt:

    const OFFSET = 100
const ScrollViewTest = (props) => (
    <View style={{ paddingTop: OFFSET }}>
        <ScrollView>
            <Text>Test</Text>
        </ScrollView>
    </View >
)
    Wenn man aber, statt <Text>..</Text> haben eine <FlatList> mit RefreshControl die Schaltfläche aktualisieren werden, bevor die Polsterung-wie Effekt, statt nur über die Liste, so kann ich nicht erreichen das gleiche 🙁
    Interessant, was overflow: "hidden" wird in diesem Fall zu tun

    InformationsquelleAutor Alexander Vitanov

  4. 0

    Wenn ich versuche zu nennen, scrollTo aus componentDidMount Methode, die nicht scrollen. Ich verwenden Sie die Problemumgehung, die mit setTimeout machen, damit es funktioniert:

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

    InformationsquelleAutor yuanwy

Schreibe einen Kommentar