web-dev-qa-db-fra.com

Définir contentInset et contentOffset dans ScrollView de React Native

J'essaie de faire en sorte que mon contenu commence à 100 pixels du haut dans React Native. J'ai essayé avec

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

Mais lorsque je rends l'écran, il commence à 0 px, mais si je défile un peu, il défilera à 100px à partir du haut et y restera.

Il semble donc que React Native ne déclenche pas les propriétés contentOffset et contentInset à l'initialisation.

Comment puis-je réparer cela? J'ai également essayé de définir automaticallyAdjustContentInsets={false} sans modification.

En outre, il semble que ces propriétés ne concernent que iOS. Existe-t-il des propriétés similaires pour Android?

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

Vous devriez utiliser la variable contentContainerStyle1 propriété avec une marginTop sur votre ScrollView.

En utilisant cette propriété, le conteneur sera enveloppé par vos enfants (ce que je crois être ce que vous voulez dans ce cas-ci) et l’avantage supplémentaire de travailler à la fois sur iOS et sur Android.

C'est à dire.

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

Lorsque j'essaie d'appeler la méthode scrollTo de composantDidMount, elle ne défile pas. Je dois utiliser la solution de contournement avec setTimeout pour que cela fonctionne:

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

effet de rembourrage:

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

effet d'en-tête:

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