React Native学习（9）使用滚动视图

最新推荐文章于 2023-05-29 15:04:09 发布

黄权浩

最新推荐文章于 2023-05-29 15:04:09 发布

阅读量295

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/quanhaoH/article/details/90517241

版权

React Native学习（9）使用滚动视图

ScrollView是一个通用的可滚动的容器，不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
如：

/**
 * 慢慢学习
 * https://blog.csdn.net/quanhaoH
 */

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

export default class MyApp extends Component {

  render() {
      return(
          <ScrollView 
          //这为横向反之为竖直
          horizontal={true}
          >
          <Text style={
    {fontSize:50}}>滚动视图</Text>
          <Image source={
  {uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558692870403&di=ca88ff09c4b67181a3d574792e553139&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F94f7d04e9b05873aaf6926b21f4d814665c4ee26608a-tm9JcO_fw658", width: 64, height: 64}} />
          <Image source={
  {uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558692870403&di=ca88ff09c4b67181a3d574792e553139&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F94f7d04e9b05873aaf6926b21f4d814665c4ee26608a-tm9JcO_fw658", width: 64, height: 64}} />
          <Image source={
  {uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558692870403&di=ca88ff09c4b67181a3d574792e553139&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F94f7d04e9b05873aaf6926b21f4d814665c4ee26608a-tm9JcO_fw658", width: 64, height: 64}} />
          <Image source={
  {uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558692870403&di=ca88ff09c4b67181a3d574792e553139&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F94f7d04e9b05873aaf6926b21f4d814665c4ee26608a-tm9JcO_fw658", width: 64, height: 64}} />
          <Image source={
  {uri: "https: