React Native ScrollView元素 – React Native实战教程 _ReactNative实战教程

上一章React Native实战教程请查看：React Native使用文本输入TextInput元素
在本章中，我们将向你展示如何使用ScrollView元素。
我们将再次创建ScrollViewExample.js并将其导入到Home中。
App.js

import React from 'react'; import ScrollViewExample from './scroll_view.js'; const App = () => { return < ScrollViewExample />; };

Scrollview将呈现一个名称列表，我们将在state状态下创建它。
ScrollView.js

import React, {Component} from 'react'; import {Text, Image, View, StyleSheet, ScrollView} from 'react-native'; class ScrollViewExample extends Component { state = { names: [ {name: 'Ben', id: 1}, {name: 'Susan', id: 2}, {name: 'Robert', id: 3}, {name: 'Mary', id: 4}, {name: 'Daniel', id: 5}, {name: 'Laura', id: 6}, {name: 'John', id: 7}, {name: 'Debra', id: 8}, {name: 'Aron', id: 9}, {name: 'Ann', id: 10}, {name: 'Steve', id: 11}, {name: 'Olivia', id: 12}, ], }; render() { return ( < View> < ScrollView> {this.state.names.map((item, index) => ( < View key={item.id} style={styles.item}> < Text>{item.name}< /Text> < /View> ))} < /ScrollView> < /View> ); } } export default ScrollViewExample; const styles = StyleSheet.create({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, backgroundColor: '#d2f7f1', }, });

【React Native ScrollView元素 – React Native实战教程】当我们运行应用程序时，我们将看到可滚动的名称列表。