React Native：如何在滾動視圖中從頂部生成空間

Question

問這個問題可能很愚蠢，但相信我，我是 React Native 的新手。 實際上，我正在研究使用滾動視圖的項目，它工作正常，但我沒有實現我的目標，當應用程序啟動時我想跳過應用程序的頂部區域並默認向下滾動（例如marginTop:20px 。

例如，當應用程序啟動時，我在應用程序中有標題我想跳過標題區域並想向下滾動到搜索欄。 從頂部我想給20px空間。 有人可以幫助我怎么可能嗎謝謝

Answer 1

如果你想給ScrollView 設置樣式，那么你應該使用contentContainerStyle 。 喜歡

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

有關 ScrollView 的更多信息，請查看此處的文檔

如果你想要標題，你可以使用本機基本標題，這是非常有用的檢查 這個。

Answer 2

檢查下面的例子。 我使用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,
  },
});