React native 组件ScrollView的简单使用

AaVictory.

已于 2022-08-23 10:44:36 修改

阅读量502

点赞数

文章标签： react native javascript react.js

于 2022-08-23 10:44:00 首次发布

本文链接：https://blog.csdn.net/afufufufu/article/details/126480037

版权

React Native ScrollView 水平布局滚动条分页滚动

关键词由CSDN通过智能技术生成

常用属性

horizontal={true} 水平排列（如果不写默认的是竖向）
showsHorizontalScrollIndicator 不显示横向滚动条（用小数点代替）
pagingEnabled={true} 滚动条倍数滚动（类似与滑动一页）

这是最常用的三个，当然有很多属性点击参考官网

举例代码如下：

import React, { Component } from 'react'
import { View,ScrollView,TextInput,Image,Text,StyleSheet,TouchableOpacity,Dimensions } from 'react-native'

export default class App5 extends Component {
  render() {
    return (
      <View >
          {/* showsHorizontalScrollIndicator  不显示横向滚动条（用小数点代替）
              horizontal={true} 水平排列
              pagingEnabled={true} 滚动条倍数滚动（类似与滑动一页）
          */}
          <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true}>
          <View style={styles.box1}></View>
          <View style={styles.box2}></View>
          </ScrollView>
      </View>
    )
  }
}
const styles=StyleSheet.create({
    box1:{
        width:360,
        height:150,
        backgroundColor:"#ccc"
    },
    box2:{
        width:360,
        height:150,
        backgroundColor:"pink"
    }
})