1 导航容器类 FlatNav
import React,{Component} from 'react'
import {
createAppContainer,
createStackNavigator
} from 'react-navigation'
import FlatFirst from './FlatFirst'
import FlatListPraceice from './FlatListPractice'
const nav = createStackNavigator({
first:{
screen:FlatFirst,
navigationOptions:{
title:'首页'
}
} ,
list:{
screen:FlatListPraceice,
navigationOptions:{
title:'FlastList'
}
}
});
export default NavContainer = createAppContainer(nav);
2.首页
import React,{Component} from 'react'
import {View, Button, Text} from 'react-native'
export default class FlatFirst extends Component{
render(){
const {navigation} = this.props;
//console.warn(navigation);
return <View>
<Text>FlastFirst</Text>
<Button
title='跳转到FlatList界面'
onPress={()=>{
navigation.navigate('list')
}}
>
</Button>
</View>
}
}
3. FlatList
import React, {Component} from 'react'
import {
View,
Button,
StyleSheet,
FlatList,
Text,
ActivityIndicator,
RefreshControl
} from 'react-native'
const CITY_NAMES = ['北京','上海','广州','深圳','重庆','青岛'];
export default class FlatListPractice extends Component {
constructor(props) {
super(props);
this.state = {
isLoading:false,
dataArray:CITY_NAMES
}
}
_renderItem(data){
return <View style={styles.item}>
<Text>{data.item}</Text>
</View>
}
loadData(isLoading){
if (isLoading){
this.setState({
isLoading:true
});
}
setTimeout(()=>{
let dataArr = [];
if (isLoading){
for (let i = this.state.dataArray.length - 1;i>= 0;i--){
dataArr.push(this.state.dataArray[I]);
}
}else {
dataArr = this.state.dataArray.concat(CITY_NAMES);
}
this.setState({
isLoading:false,
dataArray:dataArr
});
},2000);
}
getIdi(){
return <View style={styles.indi}>
<ActivityIndicator
tintColor={'red'}
/>
<Text>上拉加载...</Text>
</View>
}
render() {
return <View style={styles.container}>
<FlatList
data={this.state.dataArray}
renderItem = {(data)=>this._renderItem(data)}
refreshControl = {
<RefreshControl
title='上拉加载'
tintColor={'red'}
refreshing={this.state.isLoading}
onRefresh={()=>{this.loadData(true)}}
/>
}
ListFooterComponent={()=>this.getIdi()}
onEndReached={()=>{this.loadData()}}
/>
</View>
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'gray',
flex: 1
},
item:{
backgroundColor:'green',
height:80,
marginLeft:15,
marginRight:15,
marginTop:15
},
indi:{
alignItems:'center'
}
});
SwipeableFaltList
![]()
Simulator Screen Shot - iPhone X - 2019-07-25 at 18.15.37.png
Simulator Screen Shot - iPhone X - 2019-07-25 at 18.15.37.png
import React, {Component} from 'react'
import {
View,
Text,
TouchableHighlight,
FlatList,
SwipeableFlatList,
StyleSheet,
RefreshControl,
ActivityIndicator
} from 'react-native'
const CITY_NAMES = ['北京', '上海', '广州', '深圳', '青岛', '东平'];
export default class swipeableList2 extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataArray: CITY_NAMES
}
}
_renderItem(data) {
return <View style={styles.item}>
<Text>{data.item}</Text>
</View>
}
loadData(isLoad) {
if (isLoad) {
this.setState({
isLoading: true
});
}
setTimeout(() => {
let arr = [];
if (isLoad) {
for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
arr.push(this.state.dataArray[I]);
}
} else {
arr = this.state.dataArray.concat(CITY_NAMES);
}
this.setState({
isLoading: false,
dataArray: arr
});
}, 2000);
}
getIdr() {
return <View>
<ActivityIndicator
tintColor={'red'}
/>
<Text>上拉加载更多</Text>
</View>
}
quickAction() {
return <View style={styles.quickContainer}>
<TouchableHighlight
onPress={() => {
alert('确认删除');
}}
>
<View style={styles.quick}>
<Text>删除</Text>
</View>
</TouchableHighlight>
</View>
}
render() {
return <View style={styles.container}>
<SwipeableFlatList
data={this.state.dataArray}
renderItem={(data) => this._renderItem(data)}
refreshControl={
<RefreshControl
refreshing={this.state.isLoading}
onRefresh={() => {
this.loadData(true)
}}
/>
}
ListFooterComponent={
() => this.getIdr()
}
onEndReached={() => {
this.loadData()
}}
renderQuickActions = {()=>this.quickAction()}
maxSwipeDistance = {100}
/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray'
},
item: {
marginTop: 15,
marginRight: 15,
marginLeft: 15,
height: 60,
backgroundColor: 'green'
},
quickContainer: {
backgroundColor: 'red',
flex: 1,
alignItems:'flex-end',
marginTop: 15,
marginBottom: 0,
marginLeft: 15,
marginRight: 15,
},
quick: {
padding:5,
backgroundColor:'orange',
justifyContent:'center',
flex:1,
width:100,
alignItems:'center'
},
});
SectionList
Simulator Screen Shot - iPhone X - 2019-07-25 at 20.33.18.png
import React, {Component} from 'react'
import {
View,
Text,
SectionList,
StyleSheet,
RefreshControl,
ActivityIndicator
} from 'react-native'
const CITY_NAMES = [{data: ['北京', '上海', '天津', '武汉'], title: '一线城市'}, {
data: ['广州', '深圳', '陪娃', '南宁', '邹平'],
title: '二线城市'
}, {data: ['青岛', '东平', '大连', '长春', '普吉岛', '马尔代夫'], title: '三线城市'}];
export default class sectionList extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataArray: CITY_NAMES
}
}
_renderItem(data) {
return <View style={styles.item}>
<Text>{data.item}</Text>
</View>
}
loadData(isLoad) {
if (isLoad) {
this.setState({
isLoading: true
});
}
let arr = [];
if (isLoad) {
for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
arr.push(this.state.dataArray[i]);
}
} else {
arr = this.state.dataArray.concat(CITY_NAMES);
}
setTimeout(() => {
this.setState({
isLoading: false,
dataArray: arr
});
}, 2000);
}
getIdi() {
return <View>
<ActivityIndicator
tintColor={'red'}
/>
<Text>上拉加载更多</Text>
</View>
}
_renderSection({section}) {
return <View style={styles.sectionHeader}>
<Text style={styles.text}>
{section.title}
</Text>
</View>
}
render() {
return <View style={styles.container}>
<SectionList
sections={this.state.dataArray}
renderItem={(data) => this._renderItem(data)}
refreshControl={
<RefreshControl
refreshing={this.state.isLoading}
tintColor={'red'}
onRefresh={() => {
this.loadData(true)
}}
/>
}
ListFooterComponent={
() => this.getIdi()
}
onEndReached={() => {
this.loadData()
}}
renderSectionHeader={(section) =>this._renderSection(section)}
keyExtractor={(item, index) => item + index}
ItemSeparatorComponent={
()=><View style={styles.line}></View>
}
/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
},
item: {
marginRight: 0,
marginLeft: 0,
marginTop: 15,
height: 80,
backgroundColor: 'white',
alignItems:'center',
justifyContent:'center'
},
sectionHeader:{
height:50,
backgroundColor:'#93ebbe',
alignItems:'center',
justifyContent:'center'
},
text:{
},
line:{
backgroundColor:'gray',
height:1,
}
});
