在App.js 文件里,复制下面代码:
该功能包括轮播图的使用,FlatList 上拉刷新等。
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
TextInput,
Button,
ScrollView,
Dimensions,
FlatList,
Alert,
StatusBar,
TouchableHighlight,
Image,
RefreshControl
} from "react-native";
const circlesize = 8;
const circleMargin = 5;
export default class home extends Component {
constructor(props) {
//构造函数
super(props);
this.state = {
isRefreshing: false, //是否正在刷新的标志
searchText: "",
advertisements: [
//轮播广告数组
{
//url:'https://img13.360buyimg.com/cms/jfs/t4090/228/1399180862/217278/206073fe/5874e621Nc675c6d0.jpg'
image: require("./images/1.jpg")
},
{
//url:'https://img13.360buyimg.com/cms/jfs/t3937/164/1340098884/295670/ca0ebbaf/58703afbN5336c28d.jpg'
image: require("./images/2.jpg")
},
{
//url:'https://img14.360buyimg.com/cms/jfs/t3190/189/5382195407/297118/377d637e/586f5b7bN9c81c29c.jpg'
image: require("./images/3.jpg")
}
],
currentPage: 0,
dataSource: [
{
image: require("./images/1.jpg"),
title: "商品1",
subTitle: "描述1"
},
{
image: require("./images/2.jpg"),
title: "商品2",
subTitle: "描述2"
},
{
image: require("./images/3.jpg"),
title: "商品3",
subTitle: "描述3"
},
{
image: require("./images/3.jpg"),
title: "商品4",
subTitle: "描述4"
},
{
image: require("./images/3.jpg"),
title: "商品5",
subTitle: "描述5"
},
{
image: require("./images/3.jpg"),
title: "商品6",
subTitle: "描述6"
},
{
image: require("./images/3.jpg"),
title: "商品7",
subTitle: "描述7"
},
{
image: require("./images/3.jpg"),
title: "商品8",
subTitle: "描述8"
},
{
image: require("./images/3.jpg"),
title: "商品9",
subTitle: "描述9"
}
]
};
}
render() {
const advertisementCount = this.state.advertisements.length;
const indicatorWidth =
circlesize * advertisementCount + circleMargin * advertisementCount * 2; //这个的思维模式是space-around思维
const left = (Dimensions.get("window").width - indicatorWidth) / 2;
return (
<View style={styles.container}>
<StatusBar
backgroundColor={"blue"}
barStyle={"default"}
networkActivityIndicatorVisible={true}
/>
<View style={styles.searchbar}>
<TextInput
style={styles.input}
placeholder="搜索商品" //哈哈哈
onChangeText={text => {
this.setState({ searchText: text });
console.log("输入的内容是 " + this.state.searchText, null, null);
}}
/>
<Button
style={styles.button}
title="搜索"
onPress={() => {
Alert.alert("搜索内容" + this.state.searchText, null, null);
}}
/>
</View>
<View style={styles.advertisement}>
<ScrollView
ref="scrollView"
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnable={true}
>
{this.state.advertisements.map((advertisement, index) => {
return (
<TouchableHighlight
key={index}
onPress={() => Alert.alert("你单击了轮播图", null, null)}
>
<Image
style={styles.advertisementContent}
source={advertisement.image}
/>
</TouchableHighlight>
);
})}
</ScrollView>
<View
style={[
styles.indicator,
{
left: left
}
]}
>
{this.state.advertisements.map((advertisement, index) => {
return (
<View
key={index}
style={
index === this.state.currentPage
? styles.circleSelected
: styles.circle
}
/>
);
})}
</View>
</View>
<View style={styles.products}>
<FlatList
data={this.state.dataSource} //data是属性
renderItem={this._renderRow}
renderSeparator={this._renderSeperator}
refreshControl={this._renderRefreshControl()}
keyExtractor = {this._extraUniqueKey}
/>
</View>
</View>
);
}
_extraUniqueKey(item,index) {
return "index" + index + item
}
_renderRow({item}) {
return (
<TouchableHighlight
onPress={() => Alert.alert("你单击了商品列表", null, null)}
>
<View style={styles.row}>
<Image source={item.image} style={styles.productsImage} />
<View style={styles.productText}>
<Text style={styles.productsTitle}>{item.title}</Text>
<Text style={styles.productsSubTitle}>{item.subTitle}</Text>
</View>
</View>
</TouchableHighlight>
);
}
_renderSeperator(sectionID, rowID, adjacentRowHighlighted) {
return <View key={"${sectionID} - ${rowID}"} style={styles.divider} />;
}
componentDidMount() {
this._startTimer();
}
componentWillUnmount() {
clearInterval(this.interval);
}
_startTimer() {
this.interval = setInterval(() => {
//使用setInterval创建定时器
nextPage = this.state.currentPage + 1;
if (nextPage >= 3) {
nextPage = 0; //如果已经滚动到最后一页,下次返回第一页
}
this.setState({ currentPage: nextPage }); // 更新nextSate中的 currentstate
const offsetX = nextPage * Dimensions.get("window").width; // 计算ScrollView 滚动的X轴偏移量(因为是横向滚动)
this.refs.scrollView.scrollResponderScrollTo({
x: offsetX,
y: 0,
animated: true
});
}, 2000); //设置定时器的时间间隔为2s
}
_renderRefreshControl() {
return (
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh}
tintColor={"#FF0000"}
title={"正在刷新数据,请稍后..."}
titleColor={"#0000FF"}
/>
);
}
//刷新
_onRefresh = () => {
this.setState({ isRefreshing: true });
setTimeout(() => {
const products = Array.from(new Array(10)).map((value, index) => ({
image: require("./images/1.jpg"),
title: "新商品" + index,
subTitle: "新商品描述" + index
}));
this.setState({
isRefreshing: false,
dataSource: products
});
}, 2000);
};
}
const styles = StyleSheet.create({
container: {
flex: 1
},
searchbar: {
marginTop: Platform.OS === "ios" ? 20 : 0,
height: 40,
flexDirection: "row"
},
input: {
flex: 1,
borderColor: "gray",
borderWidth: 2,
borderRadius: 10
},
button: {
flex: 1
},
advertisementContent: {
width: Dimensions.get("window").width,
height: 180
},
row: {
height: 60,
alignItems: "center", //项目交叉轴上如何对齐,在列上如何对齐
backgroundColor: "white",
flexDirection: "row"
},
productsImage: {
width: 40,
height: 40,
marginLeft: 10,
marginTop:10,
marginRight: 10,
alignSelf: "flex-start",
borderRadius: 5,
},
products: {
flex: 1,
},
productText: {
flex: 1,
marginTop: 10,
marginBottom: 10,
},
productsTitle: {
flex: 3,
fontSize: 16
},
productsSubTitle: {
flex: 2,
fontSize: 14,
color: "gray"
},
indicator: {
position: "absolute",
top: 160,
flexDirection: "row"
},
circle: {
width: circlesize,
height: circlesize,
borderRadius: circlesize / 2,
backgroundColor: "gray",
marginHorizontal: circleMargin
},
circleSelected: {
width: circlesize,
height: circlesize,
borderRadius: circlesize / 2,
backgroundColor: "white",
marginHorizontal: circleMargin
},
divider: {
height: 1,
width: Dimensions.get("window").width - 5,
marginLeft: 5,
backgroundColor: "lightgray"
}
});
效果图初始情况:
下拉刷新后数据源变了的情况: