React Native 滚动视图 ScrollView - React Native 基础教程

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

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

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

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

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 App

const styles = StyleSheet.create ({

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

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

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

ScrollView 滚动视图组件

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

<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 App

const styles = StyleSheet.create ({

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

运行效果如下

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