基礎篇章：React Native之 ScrollView 的講解

阿新 • • 發佈：2022-04-28

（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

編者按：其實我並不太喜歡在週末發公眾號，畢竟大家都在休息和放鬆，不想學習，但是今天在群裡我看到有人說：這周群主關於React Native的文章發的很少，不夠學的，我發的少，是因為我看閱讀量少，所以減少了釋出次數，但是看到群裡的人這麼一問，感覺我必須今天再多發一篇。回饋給一直跟著我學習的程式設計師和開發者。

大家好，我是ScrollView，相信做過移動或者前端開發的人肯定都很熟悉我，對，我就是那個可以滾動的容器，滾有點難聽，我是可以滑動的容器，我滑動起來，摩擦摩擦，似魔鬼的步伐。我不僅可以上下滾動，就是垂直，還可以左右滾動，這叫有水平。我厲不厲害？我這個人，為人心胸寬廣，可以包容很多東西，我這叫宰相肚子裡能撐船，什麼元件，什麼檢視都可以放進來，主要是本人太餓了，啥都喜歡吃。這就是我的自我介紹。

關於我，我還想說，我這個人身上笑點比較低，隨便一觸控就想笑，當然，你們摸我，讓我幹什麼事，我還是很聽話的，唯獨有一點就是你們別想讓我滾，讓我滾是有條件的，條件就是必須讓我吃飽，吃撐了才可以，這樣我才有力氣滾動（檢視高度一定才可以滾動）。要麼設定我的身高是固定的，當然我想長高，所以不建議這麼做，要麼就是設定我上級的高度，當然要這樣做，不要忘了設定flex:1,要不然一樣沒用。

我的性格

來看看我有哪些性格特點，只有知道了我的性格特點，才更能容易瞭解我，針對我，容易控制我啊，如果你不瞭解我，就想讓我幫你幹活？做夢去吧。

contentContainerStyle 這個樣式會應用到一個內層的內容容器上，所有的子檢視都會包裹在內容容器內。

horizontal 如果設為true，意思是我吃的東西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），預設false，當然是垂直方向了。
keyboardDismissMode enum('none', 'interactive', 'on-drag') 當我滾動的時候，是否隱藏鍵盤
- none（預設值），拖拽時不隱藏軟鍵盤。
- on-drag 當拖拽開始的時候隱藏軟鍵盤。
- interactive 軟鍵盤伴隨拖拽操作同步地消失，並且如果往上滑動會恢復鍵盤。安卓裝置上不支援這個選項，會表現的和none一樣。
keyboardShouldPersistTaps 當此屬性為false的時候，在軟鍵盤啟用之後，點選焦點文字輸入框以外的地方，鍵盤就會隱藏。如果為true，滾動檢視不會響應點選操作，並且鍵盤不會自動消失。預設值為false。

onContentSizeChange function 該函式方法會在ScrollView內部可滾動內容的檢視發生變化時呼叫。
onScroll function 在滾動的過程中，每幀最多呼叫一次此回撥函式。呼叫的頻率可以用scrollEventThrottle屬性來控制。
pagingEnabled 如果為true，滾動檢視的滾動檢視大小的倍數滾動時停止。這可用於水平分頁。預設值false。
refreshControl 告訴RefreshControl元件，為我供下拉重新整理功能。
removeClippedSubviews （實驗屬性）當為true的時候。在ScrollView檢視之外的檢視(該檢視的overflow屬性值必須要為hidden)會從被暫時移除，該設定可以提高滾動的效能。
scrollEnabled 為false時，內容檢視不可以滾動，預設值true。
showsHorizontalScrollIndicator 當為true時，顯示水平滾動條
showsVerticalScrollIndicator 與上面正好相反。

我的穿衣打扮

來，一起來看看，我有哪些外在的服飾和化妝品，可以使用更佳美觀和漂亮，修飾我的內在和外在。

backfaceVisibility (['visible', 'hidden']) 顯示還是隱藏
backgroundColor color 背景色
borderBottomColor color 底部邊框顏色
borderBottomLeftRadius number 左下角圓角大小
borderBottomRightRadius 自己翻譯（與上同理）
borderBottomWidth 底部邊框寬度
borderColor color 邊框顏色
borderLeftColor color
borderLeftWidth number 同理
borderRadius number 四周圓角大小
borderRightColor color
borderRightWidth number
borderStyle （[’solid', 'dotted', 'dashed']) 邊框的樣式，是實現，還是點，還是虛線
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number 邊框寬度
opacity number 設定透明度
overflow (['visible', 'hidden'])
androidelevation number android5.0以上有的，立體陰影效果
我只介紹了以上常用的的風格，還有幾個和android相關，還有很多與ios相關的屬性，我就不再介紹了，自己去官方文件查查吧。地址：[https://facebook.github.io/react-native/docs/scrollview.html]

我的秀麗身材

聞其聲不見其人，光知道我，沒見過我豈不是很out？像我這麼美的人，你們不用我，是不是有點那個啥？哈哈……

魔鬼樣子

噢，不是這個樣子，錯了，是下面這個樣子，哈哈……

邏輯實現

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

class ImageDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
         <View style={styles.title_view}>
         <Text style={styles.title_text}>
               空間動態
         </Text>
        </View>
        <ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}>
        <View style={styles.three_image_view}>
         <View style={styles.vertical_view}>
              <Image source={require('./img/igs.png')} style={{alignSelf:'center',width:45,height:45}} />
              <Text style={styles.top_text}>
                好友動態
              </Text>
         </View>
          <View style={styles.vertical_view}>
              <Image source={require('./img/eqc.png')} style={{alignSelf:'center',width:45,height:45}}/>
              <Text style={styles.top_text}>
                附近
              </Text>
         </View>
          <View style={styles.vertical_view}>
              <Image source={require('./img/iei.png')} style={{alignSelf:'center',width:45,height:45}}/>
              <Text style={styles.top_text} >
                興趣部落
              </Text>
         </View>
        </View>
        <View style={{height:30,backgroundColor:'#f9f9fb'}}/>
        <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                羽毛球
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                火車票
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         <View style={styles.rectangle_view}>
          <View style={{flexDirection:'row',alignItems: 'center'}}>
              <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
              <Text style={styles.rectangle_text} >
                視訊
              </Text>
          </View>
          <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
         </View>
         </ScrollView>
         <TouchableOpacity
          style={styles.button}
          onPress={() => { _scrollView.scrollTo({y: 0}); }}>
          <Text>讓我滾回去</Text>
        </TouchableOpacity>
      </View>
    );
  }
}




AppRegistry.registerComponent('ImageDemo', () => ImageDemo);

ok,到這裡ScrollView就講完了，由於非常簡單，大家趕緊去練練手吧！不懂的可以在下面留言，由於我也是第一次學，歡迎大家提出不足，一起交流學習。

基礎篇章：React Native之 ScrollView 的講解

我的性格

我的穿衣打扮

我的秀麗身材

魔鬼樣子

邏輯實現

基礎篇章：React Native之 ScrollView 的講解

基礎篇章：React Native之 Image 的講解

基礎篇章：React Native 之 TextInput 的講解

基礎篇章：React Native 之 View 和 Text 的講解

基礎篇章：React Native之Flexbox的講解（Height and Width）

react native 之ScrollView下拉重新整理

react native之ScrollView下拉重新整理效果

基礎篇章：關於 React Native 之 RefreshControl 元件的講解

基礎篇章：關於 React Native 之 ListView 元件的講解

基礎篇章：關於 React Native 之 Touchable 系列元件的講解

基礎篇章：關於 React Native 之 Navigator 元件的講解

基礎篇章：關於 React Native 之 Picker 元件的講解

基礎篇章：關於 React Native之 ActivityIndicator 元件的講解

基礎篇章：關於 React Native 之 KeyboardAvoidingView 元件的講解

基礎篇章：關於 React Native 之 Slider 元件的講解

基礎篇章：關於 React Native 之 Modal 元件的講解

基礎篇章：關於 React Native 的props，state，style的講解

React Native中ScrollView元件輪播圖與ListView渲染列表元件用法例項分析

Python基礎知識點：多程序的應用講解

Python基礎知識點：多程式的應用講解

基礎篇章：React Native之 ScrollView 的講解

我的性格

我的穿衣打扮

我的秀麗身材

魔鬼樣子

邏輯實現

相關推薦