

ScrollView
là một thành phần chứa được nhiều những thành phần khác bên trong nó, và nó có khả năng scroll các thành phần ở bên trong nó. Các thành phần có thể scroll cần phải đồng nhất, và bạn có thể scroll dọc hoặc ngang bằng cách cài đặt cho thuộc tính horizontal
.
import React, { useState } from "react";
import { Text,Button, View, StyleSheet, ScrollView, Image } from "react-native";
const App = ()=> {
return (
<ScrollView>
<Text >Scroll me plz</Text>
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Text >If you like</Text>
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Text >Scrolling down</Text>
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Text >What's the best</Text>
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Text >Framework around?</Text>
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Image source={require('./assets/facebook1.png')} />
<Text >React Native</Text>
</ScrollView>
);
}
export default App;
import React, { useState } from "react";
import { Text,Button, View, StyleSheet, ScrollView, Image } from "react-native";
const App = ()=> {
return (
<ScrollView>
<View>
<Text >Scroll horizontal</Text>
<ScrollView horizontal>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
</ScrollView>
</View>
</ScrollView>
);
}
export default App;
ScrollView hoạt động tốt nhất để trình bày một số lượng nhỏ những thứ có kích thước hạn chế. Tất cả các thành phần và chế độ xem của ScrollView được hiển thị, ngay cả khi chúng hiện không được hiển thị trên màn hình. Nếu bạn có một danh sách dài các mục không vừa với màn hình, bạn nên sử dụng FlatList để thay thế
import React, { useState } from "react";
import { Text,Button, View, StyleSheet, ScrollView, Image, FlatList } from "react-native";
const App = ()=> {
return (
<View>
<Text style={{textAlign:'center',fontSize:36}}>FlatListBasics</Text>
<View>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) =><View style={{alignItems:'center'}}>
<Image source={require('./assets/facebook1.png')} style={{width:200,height:200}}/>
<Text style={{color:'red'}}>{item.key}</Text>
</View>}
/>
</View>
</View>
);
}
export default App;
Nếu bạn muốn hiển thị một tập hợp dữ liệu được chia thành các phần logic, có thể với các tiêu đề phần, tương tự như UITableViews trên iOS, thì SectionList là cách phù hợp
import React, { useState } from "react";
import { Text,Button, View, StyleSheet, ScrollView, Image, FlatList, SectionList } from "react-native";
const App = ()=> {
return (
<View>
<Text style={{textAlign:'center',fontSize:36}}>SectionList</Text>
<View>
<SectionList
sections={[
{title: 'D', data: ['Devin', 'Dan', 'Dominic']},
{
title: 'J',
data: [
'Jackson',
'James',
'Jillian',
'Jimmy',
'Joel',
'John',
'Julie',
],
},
]}
renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => (
<Text style={styles.sectionHeader}>{section.title}</Text>
)}
keyExtractor={item => `basicListEntry-${item}`}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})
export default App;