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

阅读：评论：0

前端江太公

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

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 滚动视图 ScrollView

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

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

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

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

App.js

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 Appconst styles = ate ({list: {backgroundColor:'#eeeeee',},item: {flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',padding: 30,marginBottom: 8,backgroundColor: '#ffffff'}
})

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

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

ScrollView 滚动视图组件

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

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

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

App.js

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 Appconst styles = ate ({list: {backgroundColor:'#eeeeee',},item: {flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',padding: 30,marginBottom: 8,backgroundColor: '#ffffff'}
})