React Native ScrollView

摘要: 本教程将教你如何使用 React Native ScrollView 组件在你的应用程序中创建可滚动内容。

React Native ScrollView 组件简介

当你有一组超出屏幕尺寸的组件列表时，有些组件将被隐藏。要通过滚动查看这些组件，可以使用 ScrollView 组件。

ScrollView 组件允许你滚动浏览组件列表。它支持垂直和水平滚动。

ScrollView 组件始终一次渲染嵌套组件，即使它们在屏幕上不可见。这被称为急切渲染。

如果你有一个包含大量嵌套组件的列表，渲染将需要时间，并会降低应用程序的性能。

以下是用 ScrollView 组件的步骤

首先，从 react-native 库导入 ScrollView

import { ScrollView } from 'react-native';Code language: JavaScript (javascript)

其次，将组件包装在 ScrollView 组件中

<ScrollView>
    { /* Nested components */ }
</ScrollView>Code language: HTML, XML (xml)

ScrollView 组件始终需要一个边界高度才能正常工作。为此，你用边界高度设置父视图的高度，并确保所有父视图都具有边界高度。

例如，以下

<SafeAreaView style={{flex: 1}}>
   <ScrollView>
      {/* {children} */}
   </ScrollView>
</SafeAreaView>Code language: HTML, XML (xml)

ScrollView 组件始终需要边界高度，可以通过提供所有父视图的边界高度来设置。确保所有父视图都有边界高度。

请记住，ScrollView 应该始终被高度限制

以下示例在屏幕上渲染 30 个 Text 组件。由于组件数量很多，其中一些会被隐藏。

import { StyleSheet, Text, SafeAreaView } from 'react-native'

const ScrollViewDemo = () => {

    // create Text components
    const children = [];
    for (let i = 0; i < 30; i++) {
        children.push(<Text style={styles.text} key={i}>Text {i}</Text>);
    }

    // render the Text components
    return (
        <SafeAreaView style={styles.container}>
            {children}
        </SafeAreaView>
    );
}

export default ScrollViewDemo;
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    text: {
        fontSize: 40,
    }
});Code language: JavaScript (javascript)

应用程序渲染所有 Text 组件，但屏幕只显示其中一部分。

要通过滚动查看隐藏的组件，可以将 Text 组件包装在 ScrollView 中，如下所示：

import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native'

const ScrollViewDemo = () => {

    // create Text components
    const children = [];
    for (let i = 0; i < 30; i++) {
        children.push(<Text style={styles.text} key={i}>Text {i}</Text>);
    }

    // render the Text components
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                {children}
            </ScrollView>
        </SafeAreaView>
    );
}

export default ScrollViewDemo;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    text: {
        fontSize: 40,
    }
});Code language: JavaScript (javascript)

现在，你可以滚动查看内容了。

总结

• 使用 ScrollView 组件在你的应用程序中创建可滚动内容。
• ScrollView 组件始终一次渲染所有嵌套组件。
• ScrollView 组件始终需要一个边界高度才能工作。