前端江太公
React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。
React Native系列导航
09-ReactNative输入组件TextInput
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
17-ReactNative滚动视图ScrollView
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 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
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'
}
})
运行效果如下
通过上下滑动视图，我们就可以看到所有的语言了。
