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

上一章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',
  },
});

当我们运行应用程序时，我们将看到可滚动的名称列表。