React native: Как создать пространство сверху в scrollview - PullRequest
Новая
       13

React native: Как создать пространство сверху в scrollview

0 голосов
/ 07 марта 2020

это может быть глупый вопрос, но поверьте мне, я новичок в React Native. На самом деле, я работаю над проектом, в котором я использую представление прокрутки, оно работает нормально, но я не достиг своей цели, чего я хочу, когда приложение запускается. Я хочу пропустить верхнюю область приложения и прокрутить вниз по умолчанию (например, marginTop:20px.

Например, у меня есть заголовок в приложении, когда приложение запускается, я хочу пропустить область заголовка и прокрутить вниз до панели поиска. Сверху я хочу дать пространство 20px. Может кто-нибудь, пожалуйста помогите мне, как это было бы возможно Спасибо

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

Проверьте ниже пример. который я создал используя ScrollView . 

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {

  setScrollToEnd=()=>{
      this.scroll.scrollTo({ y: 100, animated: true })
  }

  render() {
    return (

        <ScrollView contentContainerStyle={styles.container}
          ref={ref => (this.scroll = ref)}
          onContentSizeChange={this.setScrollToEnd}>
          <Text style={styles.textStyle}>Top of the page</Text>
          <Text style={styles.textStyle}>Top of the page</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>hello</Text>
          <Text style={styles.textStyle}>end of the page</Text>
          <Text style={styles.textStyle}>end of the page</Text>
        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    padding: 70,
  },
});
0 голосов
/ 08 марта 2020

Если вы хотите присвоить стиль ScrollView , вам следует использовать contentContainerStyle . Как и 

<ScrollView contentContainerStyle={{marginTop: 20}}>
     <Text>Hello World</Text>
  </ScrollView>

, чтобы узнать больше о ScrollView, проверьте документы Здесь

И если вы хотите использовать заголовок, вы можете использовать собственный базовый заголовок, который очень полезен, проверьте это .

...