关注我们

React Native - ScrollView

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

Scrollview属性

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

垂直滚动示例

在此示例中，我们使用文本和按钮组件创建垂直滚动视图。

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 Scrool</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);

输出:

水平滚动示例

水平ScrollView从左向右滚动组件和视图。可以通过将props水平设置为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}}>learnfk</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}}>反应本机滚动视图示例</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,
    }*/
})
// 如果您使用 Create React Native App，请跳过此行
AppRegistry.registerComponent('AwesomeProject', () => ScrolledViewExample);