ScrollView元件是什麼，如何在React Native中使用它？-js教程-PHP中文網

ScrollView元件是什麼，如何在React Native中使用它？

WBOY

發布： 2023-08-24 18:01:08

轉載

1442 人瀏覽過

ScrollView 是一個可以容納多個元件和視圖的滾動容器。它是 React Native 中的核心元件之一，使用它可以實現垂直和水平滾動。

ScrollView 會根據運行平台對應到對應的原生元件。所以在 Android 上，視圖會對應到，在 iOS 上會對應到，在 Web 環境中會對應到

。

範例 1：使用 ScrollView 進行垂直捲動

在這個範例中，ScrollView 包含一個 View 和一個 Text 元件，並且它們被包裹在一個 View 中。

要使用ScrollView，首先需要匯入該元件−

import { Text, View, StyleSheet, ScrollView} from &#39;react-native&#39;;

登入後複製

要在ScrollView中顯示的資料儲存在狀態物件的names中，如下所示−

state = {
   names: [
      {&#39;name&#39;: &#39;Ben&#39;, &#39;id&#39;: 1},
      {&#39;name&#39;: &#39;Susan&#39;, &#39;id&#39;: 2},
      {&#39;name&#39;: &#39;Robert&#39;, &#39;id&#39;: 3},
      {&#39;name&#39;: &#39;Mary&#39;, &#39;id&#39;: 4},
      {&#39;name&#39;: &#39;Daniel&#39;, &#39;id&#39;: 5},
      {&#39;name&#39;: &#39;Laura&#39;, &#39;id&#39;: 6},
      {&#39;name&#39;: &#39;John&#39;, &#39;id&#39;: 7},
      {&#39;name&#39;: &#39;Debra&#39;, &#39;id&#39;: 8},
      {&#39;name&#39;: &#39;Aron&#39;, &#39;id&#39;: 9},
      {&#39;name&#39;: &#39;Ann&#39;, &#39;id&#39;: 10},
      {&#39;name&#39;: &#39;Steve&#39;, &#39;id&#39;: 11},
      {&#39;name&#39;: &#39;Olivia&#39;, &#39;id&#39;: 12}
   ]
}

登入後複製

The data i.e this.state.names is an array. The map() method is used on the array and the name is displayed inside View->Text Component as shown below −

<ScrollView>
   {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

登入後複製

ScrollView works best for static data which is of small size.But if you want to work around with dynamic that can be a huge list best to make use of the FlatList component.

Here is## the full code for ScrollView.

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from &#39;react-native&#39;;
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(props) {
      return (
         
            
               {this.state.names.map((item, index) => ({item.name}))
            }
            
         
      );
   }
}
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'
   }
})

登入後複製

輸出

ScrollView组件是什么，如何在React Native中使用它？

#範例2：使用ScrollView水平滾動

預設情況下，ScrollView垂直顯示數據。若要水平顯示數據，請使用以下屬性

horizontal={true} 如下所示−

<ScrollView horizontal={true}>
   {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

登入後複製

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from &#39;react-native&#39;;
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(props) {
      return (
            
            
               {this.state.names.map((item, index) => ({item.name}))
            }
            
         
      );
   }
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
})

登入後複製