宁波哪里做网站,深圳网站建设排名,wordpress 分享 微信二维码,wordpress防止文章被采集ScrollView 组件
ScrollView组件是一个容器滚动组件#xff0c;当容器超出指定宽高时就可以进行滚动交互。
ScrollView组件是一次性渲染所有的 React 子组件#xff0c;这在性能上是比较差的#xff0c;所以不建议当列表特别长的时候使用此组件。
接下来列举几个常用的一…ScrollView 组件
ScrollView组件是一个容器滚动组件当容器超出指定宽高时就可以进行滚动交互。
ScrollView组件是一次性渲染所有的 React 子组件这在性能上是比较差的所以不建议当列表特别长的时候使用此组件。
接下来列举几个常用的一些属性 contentContainerStyle 属性 相当于为ScrollView组件设置样式具体的实例如下 ScrollView contentContainerStyle{styles.container}/ScrollView;const styles StyleSheet.create({container: {padding: 8,},
});refreshControl 属性 结合 RefreshControl 组件一起使用用于为 ScrollView 提供下拉刷新功能。仅适用于垂直 ScrollViewshorizontalprop 必须是 false。 具体实例如下 const App: React.FC () {const [refreshing, setRefreshing] React.useState(false);const onRefresh React.useCallback(() {setRefreshing(true);setTimeout(() {setRefreshing(false);}, 2000);}, []);return (SafeAreaView style{styles.container}ScrollViewcontentContainerStyle{styles.scrollView}refreshControl{RefreshControl refreshing{refreshing} onRefresh{onRefresh} /}Text下拉刷新/Text/ScrollView/SafeAreaView);
};scrollEnabled 属性 当为 false 时视图无法通过触摸交互滚动。请注意视图始终可以通过调用来滚动 scrollTo。 export default function ScrollCards() {return (ViewText style{BaseStyle.headingText}Scroll Cards/TextScrollView contentContainerStyle{styles.container}{/* 第一组关闭滑动 */}Text style{BaseStyle.headingText}第一组/TextScrollView horizontal{true} scrollEnabled{false}View style{styles.card}TextClick/Text/ViewView style{styles.card}TextTo/Text/ViewView style{styles.card}TextMe/Text/ViewView style{styles.card}TextRun/Text/ViewView style{styles.card}TextDemo/Text/View/ScrollView{/* 第二组开启滑动 */}Text style{BaseStyle.headingText}第二组/TextScrollView horizontal{true}View style{styles.card}TextClick/Text/ViewView style{styles.card}TextTo/Text/ViewView style{styles.card}TextMe/Text/ViewView style{styles.card}TextRun/Text/ViewView style{styles.card}TextDemo/Text/View/ScrollView/ScrollView/View);
}horizontal 属性 当 true 时滚动视图的子级水平排列在行中而不是垂直排列在列中。例子如上。运行效果如下图
SectionList 组件
此组件主要是用于分段列表展示并且在性能上要比ScrollView组件更好。
此组件主要有如下
可配置的可见度回调列表标题支持列表页脚支持项目分隔符支持节标题支持节分隔符支持异构数据和项目渲染支持拉动刷新滚动加载
简单实例如下
export default function SectionListCards() {const DATA [{title: Main dishes,data: [Pizza, Burger, Risotto],},{title: Sides,data: [French Fries, Onion Rings, Fried Shrimps],},{title: Drinks,data: [Water, Coke, Beer],},{title: Desserts,data: [Cheese Cake, Ice Cream],},];return (ViewText style{BaseStyle.headingText}SectionList 组件实例/TextSectionListstyle{styles.container}sections{DATA}keyExtractor{(item, index) item index}renderItem{({ item }) (View style{styles.item}Text style{styles.title}{item}/Text/View)}renderSectionHeader{({ section: { title } }) (Text style{styles.header}{title}/Text)}//View);
}运行后效果如下图
使用此组件需要注意以下几点 当内容滚动出渲染窗口时超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。 SectionList组件是 PureComponent 类型组件这意味着如果 props 保持浅层拷贝的话它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop例如 extraData传递并且在更新后不是 否则您的 UI 可能不会因更改而更新。 SectionList组件为了节省内存和实现平滑的滚动页面的内容展示是异步实现的这就意味着当滑动速度快于页面内容渲染速度的话页面会出现空白内容。 默认情况下列表会在每个项目上查找 key 属性并将其用作 React key。或者您可以提供自定义 keyExtractor 属性。
组件必须的参数说明 renderItem 每个部分中每个项目的默认渲染器。可以在每个部分的基础上覆盖。应该返回一个 React 元素。具体代码实例 renderItem{({ item, index, section, separators }) ( )}item(类型为对象) 需要渲染的内容数据index(类型为数字)渲染内容的项目下标section(类型为对象)SectionList当前渲染节点的完整对象separators(类型为对象)具体有如下属性 highlight(类型为函数)监听元素变为高亮后可以触发的事件unhighlight(类型为函数)监听元素取消高亮后可以触发的事件updateProps(类型为函数)函数接收select和newProps两个属性。 sections 需要渲染的数据
FlatList 组件
FlatList组件租用是用于展示基本、平面列表的高性能界面具有如下功能
可选水平模式可配置的可见度回调标头支持页脚支持分隔符支持拉动刷新滚动加载滚动到索引支持多列支持
具体的实例如下
const DATA [{id: bd7acbea-c1b1-46c2-aed5-3ad53abb28ba,title: First Item,},{id: 3ac68afc-c605-48d3-a4f8-fbd91aa97f63,title: Second Item,},{id: 58694a0f-3da1-471f-bd96-145571e29d72,title: Third Item,},
];type ItemProps { title: string };const Item ({ title }: ItemProps) (View style{styles.item}Text style{styles.title}{title}/Text/View
);export default function FlatListCards() {return (ViewText style{BaseStyle.headingText}FlatListCards/TextFlatListdata{DATA}renderItem{({ item }) Item title{item.title} /}keyExtractor{(item) item.id}//View);
}const styles StyleSheet.create({container: {flex: 1,},item: {backgroundColor: #f9c2ff,padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});运行效果如下 要渲染多列请使用numColumns。 使用此方法而不是 flexWrap 布局可以防止与项目高度逻辑发生冲突。在上述的例子中我们添加numColumns属性就可以关键代码如下
FlatListnumColumns{2}data{DATA}renderItem{({ item }) Item title{item.title} /}keyExtractor{(item) item.id}
/运行效果如下 实现更加复杂、可选的实例
type ItemData {id: string;title: string;
};const DATA: ItemData[] [{id: bd7acbea-c1b1-46c2-aed5-3ad53abb28ba,title: First Item,},{id: 3ac68afc-c605-48d3-a4f8-fbd91aa97f63,title: Second Item,},{id: 58694a0f-3da1-471f-bd96-145571e29d72,title: Third Item,},
];type ItemProps {item: ItemData;onPress: () void;backgroundColor: string;textColor: string;
};const Item ({ item, onPress, backgroundColor, textColor }: ItemProps) (TouchableOpacityonPress{onPress}style{[styles.item, { backgroundColor }]}Text style{[styles.title, { color: textColor }]}{item.title}/Text/TouchableOpacity
);export default function FlarCardsClick() {const [selectedId, setSelectedId] useStatestring();const renderItem ({ item }: { item: ItemData }) {const backgroundColor item.id selectedId ? #6e3b6e : #f9c2ff;const color item.id selectedId ? white : black;return (Itemitem{item}onPress{() setSelectedId(item.id)}backgroundColor{backgroundColor}textColor{color}/);};return (ViewText style{BaseStyle.headingText}FlarCardsClick/TextFlatListdata{DATA}renderItem{renderItem}keyExtractor{(item) item.id}extraData{selectedId}//View);
}const styles StyleSheet.create({item: {padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});运行效果如下
使用此组件需要注意以下几点 当内容滚动出渲染窗口时超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。 flatList组件是 PureComponent 类型组件这意味着如果 props 保持浅层拷贝的话它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop例如 extraData传递并且在更新后不是 否则您的 UI 可能不会因更改而更新。 flatList组件为了节省内存和实现平滑的滚动页面的内容展示是异步实现的这就意味着当滑动速度快于页面内容渲染速度的话页面会出现空白内容。 默认情况下列表会在每个项目上查找 key 属性并将其用作 React key。或者您可以提供自定义 keyExtractor 属性。
组件必须的参数说明 renderItem 每个部分中每个项目的默认渲染器。可以在每个部分的基础上覆盖。应该返回一个 React 元素。具体代码实例 renderItem{({ item, index, section, separators }) ( )}item(类型为对象) 需要渲染的内容数据index(类型为数字)渲染内容的项目下标separators(类型为对象)具体有如下属性 highlight(类型为函数)监听元素变为高亮后可以触发的事件unhighlight(类型为函数)监听元素取消高亮后可以触发的事件updateProps(类型为函数)函数接收select和newProps两个属性。 data 需要渲染的数据
VirtualizedList 组件
一般来说只有当您需要比 FlatList 提供的更多灵活性时才应该真正使用VirtualizedList。可以通过对应的属性来对需要渲染的数据进行操作后再渲染比之前的列表组件更加灵活一些。
VirtualizedList 组件通过对应的属性来维护需要渲染的页面元素并且用适当的空白区域来替换窗口之外的所有项目从而极大地提高了大型列表的内存消耗和性能。
具体实例如下
type ItemData {id: string;title: string;
};// 获取数据这里是直接就返回处理后的数据
const getItem (_data: unknown, index: number): ItemData ({id: Math.random().toString(12).substring(0),title: Item ${index 1},
});// 列表的总数
const getItemCount (_data: unknown) 50;type ItemProps {title: string;
};// 渲染的组件
const Item ({ title }: ItemProps) (View style{styles.item}Text style{styles.title}{title}/Text/View
);export default function VirtualizedListCaards() {return (ViewText style{BaseStyle.headingText}VirtualizedListCards/TextVirtualizedListinitialNumToRender{10}renderItem{({ item }) Item title{item.title} /}keyExtractor{(item) item.id}getItemCount{getItemCount}getItem{getItem}//View);
}const styles StyleSheet.create({item: {backgroundColor: #f9c2ff,height: 150,justifyContent: center,marginVertical: 8,marginHorizontal: 16,padding: 20,},title: {fontSize: 32,},
});使用此组件需要注意以下几点 当内容滚动出渲染窗口时超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。 flatList组件是 PureComponent 类型组件这意味着如果 props 保持浅层拷贝的话它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop例如 extraData传递并且在更新后不是 否则您的 UI 可能不会因更改而更新。 flatList组件为了节省内存和实现平滑的滚动页面的内容展示是异步实现的这就意味着当滑动速度快于页面内容渲染速度的话页面会出现空白内容。 默认情况下列表会在每个项目上查找 key 属性并将其用作 React key。或者您可以提供自定义 keyExtractor 属性。
组件必备的参数说明 getItem 从数据中提取需要渲染的数据 getItemCount 确认需要渲染的组件有多少 renderItem 从 data 数据中获取一个数据并进行渲染
