的方式解决。
- React-Native
后自动跳转到 Main 组件。
- 1.5秒
- export
- default class GDLaunchPage extends Component {
- componentDidMount() {
- setTimeout(() = >{
- this.props.navigator.replace({
- component: Main
- })
- },
- 1500)
- }
- render() {
- return ( < Image source = {
- {
- uri: 'launchimage'
- }
- }
- style = {
- styles.imageStyle
- }
- />
- );
- }
- }
- /
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 初始化模态 */
- } < Modal animationType = 'slide'transparent = {
- false
- }
- visible = {
- this.state.isModal
- }
- onRequestClose = { () = >this.onRequestClose()
- } > <Navigator initialRoute = {
- {
- name: 'halfHourHot',
- component: HalfHourHot
- }
- }
- renderScene = { (route, navigator) = >{
- let Component = route.component;
- return < Component removeModal = { (data) = >this.closeModal(data)
- } {...route.params
- }
- navigator = {
- navigator
- }
- />
- }} / > </Modal>
- {/ * 导航栏样式 * /}
- <CommunalNavBar
- leftItem = {() => this.renderLeftItem()}
- titleItem = {() => this.renderTitleItem()}
- rightItem = {() => this.renderRightItem()}
- / > {
- /* 根据网络状态决定是否渲染 listview */
- } {
- this.renderListView()
- } < /View>
- );
- }
- /
方法来拼接,它会返回一个 新的数组 给我们使用,而不修改传入的数组。
- concat
- // 加载最新数据网络请求
- loadData(resolve) {
- let params = {
- "count": 10
- };
- HTTPBase.get('https://guangdiu.com/api/getlist.php', params).then((responseData) = >{
- // 清空数组
- this.data = [];
- // 拼接数据
- this.data = this.data.concat(responseData.data);
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded: true,
- });
- // 关闭刷新动画
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve();
- },
- 1000);
- }
- // 存储数组中最后一个元素的id
- let cnlastID = responseData.data[responseData.data.length - 1].id;
- AsyncStorage.setItem('cnlastID', cnlastID.toString());
- }).
- catch((error) = >{})
- }
内的 ID 保存起来,因为不是大批量数据存储,这边我们就使用 AsyncStorage 进行
- 最后一个元素
的存储。
- id
- // 加载更多数据的网络请求
- loadMoreData(value) {
- let params = {
- "count" : 10,
- "sinceid" : value
- };
- HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
- .then((responseData) => {
- // 拼接数据
- this.data = this.data.concat(responseData.data);
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded:true,
- });
- // 存储数组中最后一个元素的id
- let cnlastID = responseData.data[responseData.data.length - 1].id;
- AsyncStorage.setItem('cnlastID', cnlastID.toString());
- })
- .catch((error) => {
- })
- }
的点击,需要注意的是对
- cell
进行绑定操作,不然会找不到当前的
- row
。
- this
- // 绑定
- renderRow = {
- this.renderRow.bind(this)
- }
方法实现:
- renderRow
- // 返回每一行cell的样式
- renderRow(rowData) {
- return(
- <TouchableOpacity
- onPress={() => this.pushToDetail(rowData.id)}
- >
- <CommunalHotCell
- image={rowData.image}
- title={rowData.title}
- />
- </TouchableOpacity>
- );
- }
方法实现,params 意思就是将
- pushToDetail
参数传递到
- url
组件:
- CommunalDetail
- // 跳转到详情页
- pushToDetail(value) {
- this.props.navigator.push({
- component:CommunalDetail,
- params: {
- url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
- }
- })
- }
那么就可以来做详情页了,当我们点击 cell 的时候,需要跳转到对应的 详情页 。
- id
展示,具体使用我们就不多做介绍了,很简单,详情就参考官方文档 。
- webView组件
- export default class GDCommunalDetail extends Component {
- static propTypes = {
- url:PropTypes.string,
- };
- // 返回
- pop() {
- this.props.navigator.pop();
- }
- // 返回左边按钮
- renderLeftItem() {
- return(
- <TouchableOpacity
- onPress={() => {this.pop()}}
- >
- <Text>返回</Text>
- </TouchableOpacity>
- );
- }
- componentWillMount() {
- // 发送通知
- DeviceEventEmitter.emit('isHiddenTabBar', true);
- }
- componentWillUnmount() {
- // 发送通知
- DeviceEventEmitter.emit('isHiddenTabBar', false);
- }
- render() {
- return(
- <View style={styles.container}>
- {/* 导航栏 */}
- <CommunalNavBar
- leftItem = {() => this.renderLeftItem()}
- />
- {/* 初始化WebView */}
- <WebView
- style={styles.webViewStyle}
- source={{url:this.props.url, method: 'GET' }}
- javaScriptEnabled={true}
- domStorageEnabled={true}
- scalesPageToFit={false}
- />
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex:1
- },
- webViewStyle: {
- flex:1
- }
- });
- export
- default class GDUSHalfHourHot extends Component {
- // 构造
- constructor(props) {
- super(props);
- // 初始状态
- this.state = {
- dataSource: new ListView.DataSource({
- rowHasChanged: (r1, r2) = >r1 !== r2
- }),
- loaded: true,
- };
- this.fetchData = this.fetchData.bind(this);
- }
- static defaultProps = {
- removeModal: {}
- }
- // 网络请求
- fetchData(resolve) {
- let params = {
- "c": "us"
- };
- HTTPBase.get('http://guangdiu.com/api/gethots.php', params).then((responseData) = >{
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded: true,
- });
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve(); // 关闭动画
- },
- 1000);
- }
- }).
- catch((error) = >{})
- }
- popToHome(data) {
- this.props.removeModal(data);
- }
- // 返回中间按钮
- renderTitleItem() {
- return ( < Text style = {
- styles.navbarTitleItemStyle
- } > 近半小时热门 < /Text>
- );
- }
- / / 返回右边按钮renderRightItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.popToHome(false)
- }
- } > <Text style = {
- styles.navbarRightItemStyle
- } > 关闭 < /Text>
- </TouchableOpacity > );
- }
- // 根据网络状态决定是否渲染 listview
- renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.fetchData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow.bind(this)
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- renderHeader = {
- this.renderHeader
- }
- />
- );
- }
- }
- / / 返回listview头部renderHeader() {
- return ( < View style = {
- styles.headerPromptStyle
- } > <Text > 根据每条折扣的点击进行统计, 每5分钟更新一次 < /Text>
- </View > );
- }
- // 跳转到详情页
- pushToDetail(value) {
- this.props.navigator.push({
- component: CommunalDetail,
- params: {
- url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
- }
- })
- }
- // 返回每一行cell的样式
- renderRow(rowData) {
- return ( < TouchableOpacity onPress = { () = >this.pushToDetail(rowData.id)
- } > <CommunalHotCell image = {
- rowData.image
- }
- title = {
- rowData.title
- }
- />
- </TouchableOpacity > );
- }
- componentWillMount() {
- // 发送通知
- DeviceEventEmitter.emit('isHiddenTabBar', true);
- }
- componentWillUnmount() {
- // 发送通知
- DeviceEventEmitter.emit('isHiddenTabBar', false);
- }
- componentDidMount() {
- this.fetchData();
- }
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 导航栏样式 */
- } < CommunalNavBar titleItem = { () = >this.renderTitleItem()
- }
- rightItem = { () = >this.renderRightItem()
- }
- />
- {/ * 根据网络状态决定是否渲染listview * /}
- {this.renderListView()}
- </View > );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- },
- navbarTitleItemStyle: {
- fontSize: 17,
- color: 'black',
- marginLeft: 50
- },
- navbarRightItemStyle: {
- fontSize: 17,
- color: 'rgba(123,178,114,1.0)',
- marginRight: 15
- },
- listViewStyle: {
- width: width,
- },
- headerPromptStyle: {
- height: 44,
- width: width,
- backgroundColor: 'rgba(239,239,239,0.5)',
- justifyContent: 'center',
- alignItems: 'center'
- }
- });
- export
- default class GDHome extends Component {
- // 构造
- constructor(props) {
- super(props);
- // 初始状态
- this.state = {
- dataSource: new ListView.DataSource({
- rowHasChanged: (r1, r2) = >r1 !== r2
- }),
- loaded: false,
- isModal: false
- };
- this.data = [];
- this.loadData = this.loadData.bind(this);
- this.loadMore = this.loadMore.bind(this);
- }
- // 加载最新数据网络请求
- loadData(resolve) {
- let params = {
- "count": 10,
- "country": "us"
- };
- HTTPBase.get('https://guangdiu.com/api/getlist.php', params).then((responseData) = >{
- // 拼接数据
- this.data = this.data.concat(responseData.data);
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded: true,
- });
- // 关闭刷新动画
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve();
- },
- 1000);
- }
- // 存储数组中最后一个元素的id
- let uslastID = responseData.data[responseData.data.length - 1].id;
- AsyncStorage.setItem('uslastID', uslastID.toString());
- }).
- catch((error) = >{})
- }
- // 加载更多数据的网络请求
- loadMoreData(value) {
- let params = {
- "count": 10,
- "sinceid": value,
- "country": "us"
- };
- HTTPBase.get('https://guangdiu.com/api/getlist.php', params).then((responseData) = >{
- // 拼接数据
- this.data = this.data.concat(responseData.data);
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded: true,
- });
- // 存储数组中最后一个元素的id
- let uslastID = responseData.data[responseData.data.length - 1].id;
- AsyncStorage.setItem('uslastID', uslastID.toString());
- }).
- catch((error) = >{})
- }
- // 加载更多数据操作
- loadMore() {
- // 读取id
- AsyncStorage.getItem('uslastID').then((value) = >{
- // 数据加载操作
- this.loadMoreData(value);
- })
- }
- // 模态到近半小时热门
- pushToHalfHourHot() {
- this.setState({
- isModal: true
- })
- }
- // 跳转到搜索
- pushToSearch() {
- this.props.navigator.push({
- component: Search,
- })
- }
- // 安卓模态销毁处理
- onRequestClose() {
- this.setState({
- isModal: false
- })
- }
- // 关闭模态
- closeModal(data) {
- this.setState({
- isModal: data
- })
- }
- // 返回左边按钮
- renderLeftItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pushToHalfHourHot()
- }
- } > <Image source = {
- {
- uri: 'hot_icon_20x20'
- }
- }
- style = {
- styles.navbarLeftItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // 返回中间按钮
- renderTitleItem() {
- return ( < TouchableOpacity > <Image source = {
- {
- uri: 'navtitle_home_down_66x20'
- }
- }
- style = {
- styles.navbarTitleItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // 返回右边按钮
- renderRightItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pushToSearch()
- }
- } > <Image source = {
- {
- uri: 'search_icon_20x20'
- }
- }
- style = {
- styles.navbarRightItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // ListView尾部
- renderFooter() {
- return ( < View style = {
- {
- height: 100
- }
- } > <ActivityIndicator / ></View>
- );
- }
- / / 根据网络状态决定是否渲染listview renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.loadData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow.bind(this)
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- renderHeader = {
- this.renderHeader
- }
- onEndReached = {
- this.loadMore
- }
- onEndReachedThreshold = {
- 60
- }
- renderFooter = {
- this.renderFooter
- }
- />
- );
- }
- }
- / / 跳转到详情页pushToDetail(value) {
- this.props.navigator.push({
- component: CommunalDetail,
- params: {
- url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
- }
- })
- }
- // 返回每一行cell的样式
- renderRow(rowData) {
- return ( < TouchableOpacity onPress = { () = >this.pushToDetail(rowData.id)
- } > <CommunalHotCell image = {
- rowData.image
- }
- title = {
- rowData.title
- }
- />
- </TouchableOpacity > );
- }
- componentDidMount() {
- this.loadData();
- }
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 初始化模态 */
- } < Modal animationType = 'slide'transparent = {
- false
- }
- visible = {
- this.state.isModal
- }
- onRequestClose = { () = >this.onRequestClose()
- } > <Navigator initialRoute = {
- {
- name: 'halfHourHot',
- component: USHalfHourHot
- }
- }
- renderScene = { (route, navigator) = >{
- let Component = route.component;
- return < Component removeModal = { (data) = >this.closeModal(data)
- } {...route.params
- }
- navigator = {
- navigator
- }
- />
- }} / > </Modal>
- {/ * 导航栏样式 * /}
- <CommunalNavBar
- leftItem = {() => this.renderLeftItem()}
- titleItem = {() => this.renderTitleItem()}
- rightItem = {() => this.renderRightItem()}
- / > {
- /* 根据网络状态决定是否渲染 listview */
- } {
- this.renderListView()
- } < /View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- backgroundColor: 'white',
- },
- navbarLeftItemStyle: {
- width:20,
- height:20,
- marginLeft:15,
- },
- navbarTitleItemStyle: {
- width:66,
- height:20,
- },
- navbarRightItemStyle: {
- width:20,
- height:20,
- marginRight:15,
- },
- listViewStyle: {
- width:width,
- },
- });
- /
和
- cnmaxid
参数,他们分别是最新数据中第一个元素的
- usmaxid
,也就是我们每次 刷新 的时候都保存一下数组中的第一个元素的
- id
。
- id
- // 首页存储数组中第一个元素的id
- let cnfirstID = responseData.data[0].id;
- AsyncStorage.setItem('cnfirstID', cnfirstID.toString());
- componentDidMount() {
- // 注册通知
- this.subscription = DeviceEventEmitter.addListener('isHiddenTabBar', (data)=>{this.tongZhi(data)});
- // 声明变量
- let cnfirstID = 0;
- let usfirstID = 0;
- // 最新数据的个数
- setInterval(() => {
- // 取出id
- AsyncStorage.getItem('cnfirstID')
- .then((value) => {
- cnfirstID = parseInt(value);
- });
- AsyncStorage.getItem('usfirstID')
- .then((value) => {
- usfirstID = parseInt(value);
- });
- if (cnfirstID !== 0 && usfirstID !== 0) { // 参数不为0
- // 拼接参数
- let params = {
- "cnmaxid" : cnfirstID,
- "usmaxid" : usfirstID
- };
- // 请求数据
- HTTPBase.get('http://guangdiu.com/api/getnewitemcount.php', params)
- .then((responseData) => {
- console.log(responseData);
- this.setState({
- cnbadgeText:responseData.cn,
- usbadgeText:responseData.us
- })
- })
- }
- }, 30000);
- }
来源: http://www.cnblogs.com/miaomiaoshen/p/6655409.html