React Native ScrollView

2025年3月17日 | 阅读 3 分钟

ScrollView 是一个通用的可滚动容器，可以在其中滚动多个子组件和视图。在 ScrollView 中，我们可以沿垂直和水平方向滚动组件。默认情况下，ScrollView 容器垂直滚动其组件和视图。要水平滚动其组件，它使用 props horizontal: true（默认值：horizontal: false）。

ScrollView 的 Props

alwaysBounceVertical	onScroll	horizontal
contentContainerStyle	scrollEnabled	bouncesZoom	zoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollEndDrag	centerContent	contentInset	refreshControl
pagingEnabled	scrollsToTop	snapToAlignment	showsHorizontalScrollIndicator
snapToStart	snapToEnd	indicatorStyle	showsHorizontalScrollIndicator

React Native ScrollView 示例

在此示例中，我们使用 Text 和 Button 组件创建一个垂直 ScrollView。

App.js

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text, Button, StyleSheet } from 'react-native';

export default class ScrolledViewExample extends Component {
    onPressButton() {
        alert('You clicked the button!')
    }

    render() {
        return (
            <ScrollView >
                <Text style={{fontSize:20}}>Scroll me plz</Text>
                <Button title={'Button 1'} onPress={this.onPressButton} />
                <Text style={{fontSize:20}}>React Native Example of ScrollView</Text>
                <Button title={'Button 2'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>React Native ScrollView Example</Text>
                <Button title={'Button 3'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>If you like</Text>
                <Button title={'Button 4'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Scrolling down</Text>
                <Button title={'Button 5'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Scrolling down</Text>
                <Button title={'Button 6'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>What's the best</Text>
                <Button title={'Button 7'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>What's the best</Text>
                <Button title={'Button 8'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Framework around?</Text>
                <Button title={'Button 9'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Framework around?</Text>
                <Button title={'Button 10'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>React Native</Text>
                <Button title={'Button 11'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Scroll me plz</Text>
                <Button title={'Button 12'} onPress={this.onPressButton} />
                <Text style={{fontSize:20}}>Scroll me plz</Text>
                <Button title={'Button 13'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>If you like</Text>
                <Button title={'Button 14'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>If you like</Text>
                <Button title={'Button 15'} onPress={this.onPressButton}/>
                <Text style={{fontSize:20}}>Scrolling down</Text>
                <Button title={'Button 16'} onPress={this.onPressButton}/>
            </ScrollView>
        );
    }
}
// skip this line if you are using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => ScrolledViewExample);

输出

React Native 水平 ScrollView 示例

水平 ScrollView 从左到右滚动组件和视图。它将通过将 props horizontal 设置为 true (horizontal={true}) 来实现。

App.js

import React, { Component } from 'react';
import { AppRegistry, ScrollView, View, Image, Text, Button, StyleSheet } from 'react-native';

export default class ScrolledViewExample extends Component {
    onPressButton() {
        alert('You clicked the button!')
    }

    render() {
        return (
            <ScrollView  horizontal={true} style={styles.container}>
                <Text style={{fontSize:22, padding: 10}}>Horizontal ScrollView</Text>
                <View style={[{ width: 220,height: 70,padding: 10 }]}>
                    <Button
                        onPress={this.onPressButton}
                        title="Button 1"
                        color="#FF3D00"
                    />
                </View>
                <Text style={{fontSize:22, padding: 10}}>javatpoint</Text>
                <View style={[{ width: 220,height: 70,padding: 10 }]}>
                    <Button
                        onPress={this.onPressButton}
                        title="Button 2"
                        color="#3D00FF"
                    />
                </View>
                <Text style={{fontSize:22, padding: 10}}>React Native ScrollView Example</Text>
                <View style={[{ width: 220,height: 70,padding: 10 }]}>
                    <Button
                        onPress={this.onPressButton}
                        title="Button 3"
                        color="#FFFF3D"
                    />
                </View>
                <Text style={{fontSize:22, padding: 10}}>If you like</Text>
                <View style={[{ width: 220,height: 70,padding: 10 }]}>
                    <Button
                        onPress={this.onPressButton}
                        title="Button 4"
                        color="#FF3DFF"
                    />
                </View>
                <Text style={{fontSize:22, padding: 10}}>Scrolling horizontal</Text>
                <View style={[{ width: 220,height: 70,padding: 10 }]}>
                    <Button
                        onPress={this.onPressButton}
                        title="Button 5"
                        color="#3DFF00"
                    />
                </View>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
    },
/*    buttonStyle:{
        height: 50,
        width: 70,
    }*/
})
// skip this line if you are using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => ScrolledViewExample);

输出

下一个主题React Native ListView

← 上一个下一个 →

React Native ScrollView

ScrollView 的 Props

React Native ScrollView 示例

React Native 水平 ScrollView 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native ScrollView

ScrollView 的 Props

React Native ScrollView 示例

React Native 水平 ScrollView 示例

相关帖子

React Native Props

带动画的 ProgressBar

ProgressBarAndroid

React Native WebView

环境设置

React Native Touchables

React Native Switch

使用 Flex 定位元素

React Native 教程

Layout 和 Flexbox

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器