React Native：如何在滚动视图中从顶部生成空间

Question

问这个问题可能很愚蠢，但相信我，我是 React Native 的新手。实际上，我正在开发使用滚动视图的项目，它工作正常，但我没有达到我想要的目标，当应用程序启动时我想跳过应用程序的顶部区域并默认向下滚动（例如@ 987654322@.

例如，当应用程序启动时，我在应用程序中有标题我想跳过标题区域并想向下滚动到搜索栏。从顶部开始，我想给空间 20px 。有人可以帮我怎么可能吗 谢谢

Answer 1

如果你想为 ScrollView 赋予样式，那么你应该使用 contentContainerStyle。喜欢

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

有关 ScrollView 的更多信息，请查看文档Here

如果你想要标头，你可以使用本机基础标头，这是非常有用的检查this.

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,
  },
});