React Native - ScrollView

• 

  简述

  在本章中，我们将向您展示如何使用ScrollView元素。

  我们将再次创造ScrollViewExample.js并将其导入Home.
• 

  app.js

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

  Scrollview 将呈现名称列表。我们将在状态中创建它。
• 

  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'
     }
  })
  

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