前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动跨平台框架ReactNative滚动视图ScrollView【17】

移动跨平台框架ReactNative滚动视图ScrollView【17】

作者头像
江咏之
发布2022-06-17 14:52:11
1.4K0
发布2022-06-17 14:52:11
举报
文章被收录于专栏:技术社区

React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库,因此会有更丰富的 UI 体验效果,同时也能够很好地调用底层框架的UI使用。

React Native 滚动视图 ScrollView

低头一族的我们,每天花大把大把的时间拉啊拉啊。当屏幕的内容超过一屏时,我们很熟练的往上拉一点就可以看到剩下的内容了,这时候右边还会滚动条告诉我们这是可以往上拉的。

这看起来很简单的内容,并不是每个 React Native 组件天生都自带的。并不是每个组件要显示的内容超过一屏时可以往上拉。

那个我们所熟悉的组件之母 `` 就不支持这种操作。

例如下面的代码,我们在一个 `` 中显示一组 语言 时,超过的部分就被截掉了。

App.js
代码语言:javascript
复制
import React, { Component } from 'react';
import { Text, View, StyleSheet} from 'react-native';

class App extends Component {
   state = {
      languages: [
         {'name': 'Python', 'id': 1},
         {'name': 'Perl', 'id': 2},
         {'name': 'PHP', 'id': 3},
         {'name': 'Ruby', 'id': 4},
         {'name': 'Scala', 'id': 5},
         {'name': 'JavaScript', 'id': 6},
         {'name': 'Rust', 'id': 7},
         {'name': 'Go', 'id': 8},
         {'name': 'Java', 'id': 9},
         {'name': 'C++', 'id': 10},
         {'name': 'C', 'id': 11},
         {'name': 'Awk', 'id': 12},
         {'name': 'Sed', 'id': 13},
         {'name': 'TypeScript', 'id': 14},
         {'name': 'C#', 'id': 15},
         {'name': 'F#', 'id': 16},
         {'name': 'CSS', 'id': 17},
         {'name': 'HTML', 'id': 18},
         {'name': 'React Native', 'id': 19}
      ]
   }
   render() {
      return (
         <View style={styles.list}>
            {
               this.state.languages.map((item, index) => (
                  <View key = {item.id} style = {styles.item}>
                     <Text>{item.name}</Text>
                  </View>
               ))
            }
         </View>
      )
   }
}
export default App

const styles = StyleSheet.create ({

   list: {
      backgroundColor:'#eeeeee',
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      marginBottom: 8,
      backgroundColor: '#ffffff'
   }
})

运行效果图如下,不管我们怎么卖力的拉啊拉,Go 语言下面的那些语言始终是看不到的。

为了解决这个问题,为了解决那些不支持滚动的组件内容超过一屏的问题。 `` 组件诞生了。

ScrollView 滚动视图组件

`` 滚动视图组件,顾名思义,就是当内容超过指定的高度时会可以通过滑动来显示,右边还会显示滚动条。

`` 的使用很简单,只要包括在要滚动的组件外面就可以了。

例如上面那个范例,我们只需要做一点点的修改

App.js
代码语言:javascript
复制
import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet} from 'react-native';

class App extends Component {
   state = {
      languages: [
         {'name': 'Python', 'id': 1},
         {'name': 'Perl', 'id': 2},
         {'name': 'PHP', 'id': 3},
         {'name': 'Ruby', 'id': 4},
         {'name': 'Scala', 'id': 5},
         {'name': 'JavaScript', 'id': 6},
         {'name': 'Rust', 'id': 7},
         {'name': 'Go', 'id': 8},
         {'name': 'Java', 'id': 9},
         {'name': 'C++', 'id': 10},
         {'name': 'C', 'id': 11},
         {'name': 'Awk', 'id': 12},
         {'name': 'Sed', 'id': 13},
         {'name': 'TypeScript', 'id': 14},
         {'name': 'C#', 'id': 15},
         {'name': 'F#', 'id': 16},
         {'name': 'CSS', 'id': 17},
         {'name': 'HTML', 'id': 18},
         {'name': 'React Native', 'id': 19}
      ]
   }
   render() {
      return (
         <View style={styles.list}>
            <ScrollView>
               {
                  this.state.languages.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
         </View>
      )
   }
}
export default App

const styles = StyleSheet.create ({

   list: {
      backgroundColor:'#eeeeee',
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      marginBottom: 8,
      backgroundColor: '#ffffff'
   }
})

运行效果

通过上下滑动视图,我们就可以看到所有的语言了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • React Native 滚动视图 ScrollView
    • ScrollView 滚动视图组件
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档