react native 自定义ScrollView组件（上下滑动）

ScrollView（滚动视图）的组件。

记住 ScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了 flex 或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

ScrollView 内部的其他响应者尚无法阻止 ScrollView 本身成为响应者。

ScrollView和FlatList应该如何选择？ScrollView 会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的 JS 组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而 API 在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等。

以上来源于React Native中文网（https://www.react-native.cn/docs/scrollview）。

上代码

创建自定义CKScrollView.js组件类

 1 import React,{Component} from 'react';
 2 import {
 3     View,
 4     Text,
 5     StyleSheet,
 6     ScrollScrollView,
 7     ScrollView,
 8     Dimensions
 9 } from 'react-native';
10 
11 //自定义组件类
12 export default class CKScrollView extends Component{
13     constructor(){
14         super();
15     }
16 
17     render(){
18         return(
19             <View>
20                 <ScrollView>
21                     {this._randerItem()}
22                 </ScrollView>
23             </View>
24         )
25     }
26     _randerItem(){
27         //1.颜色数组
28         let colorArr=['red','green','blue','yellow','purple'];
29         //2.组件数组
30         let itemArr=[];
31         //3.遍历
32         for(let i=0;i<colorArr.length;i++){
33             itemArr.push(
34                 <View
35                     style={{
36                         width:Dimensions.get('window').width,
37                         height:300,
38                         backgroundColor:colorArr[i]
39                     }}
40                     key={i}
41                 >
42                     <Text>{i}</Text>
43                 </View>
44             )
45         }
46         //4.返回数组组件
47         return itemArr;
48     }
49 
50 
51 
52 }
53 
54 // 样式
55 const styles=StyleSheet.create({
56 
57 });

App.js 中调用自定义 ScrollView 组件

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  *
 5  * @format
 6  * @flow strict-local
 7  */
 8 
 9 import React from 'react';
10 import {
11   SafeAreaView,
12   StyleSheet,
13   ScrollView,
14   View,
15   Text,
16   StatusBar,
17 } from 'react-native';
18 
19 import {
20   Header,
21   LearnMoreLinks,
22   Colors,
23   DebugInstructions,
24   ReloadInstructions,
25 } from 'react-native/Libraries/NewAppScreen';
26 
27 import CKScrollView from './components/CKScrollView';
28 
29 const App: () => React$Node = () => {
30 
31   return (
32     <>
33       <StatusBar barStyle="dark-content" />
34       <SafeAreaView style={styles.mainViewStyle}>
35         
36       <CKScrollView/>
37       </SafeAreaView>
38     </>
39   );
40 };
41 
42 
43 const styles=StyleSheet.create({
44   mainViewStyle:{
45       flex:1,
46       backgroundColor:'#fff',
47   }
48 });
49 
50 
51 
52 export default App;