React Native 之 ScrollView

最新推荐文章于 2025-01-18 22:11:16 发布

jlhaoran

最新推荐文章于 2025-01-18 22:11:16 发布

阅读量798

点赞数

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/69948478

版权

React Native 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个使用 React Native 实现的水平分页应用示例，通过设置 ScrollView 的属性实现水平滚动和自动分页效果，并展示了如何获取屏幕尺寸以适配不同设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Text,
  View
} from 'react-native';
//获取屏幕的宽高 
let Dimensions = require('Dimensions');
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;

export default class CQQLoginDemo extends Component {
  
  constructor(props) {
    super(props);
    this.state = {title:"常规事件",name:"name1"};
  }

  render() {
    return (
      <ScrollView 
       horizontal={true} //水平方向
       showsHorizontalScrollIndicator={false}//当值为true时显示滚动条
       pagingEnabled ={true}//当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上
       >
       {this._renderAllChild()}
       </ScrollView>
    );
  }
  
  _renderAllChild(){
    let allChallCild = [];
    let colors = ["yellow","blue","red","green","purple"];
    for(let i=0;i<5;i++){
      allChallCild.push(
        <View key={i} style={{backgroundColor:colors[i],height:100,width:ScreenWidth}}>
           <Text>{i}</Text>
        </View>
      );
    }
    return allChallCild;
  }


}

const styels = StyleSheet.create({
  continer:{
    flex: 1,
    //定义侧轴排列方式
    backgroundColor: '#dddddd'
  }
});

AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);