这次我们要做的仿 新闻头条
的首页的顶部标签列表,不要在意新闻内容。
请求数据
首先做顶部的目录视图,首先我们先获取数据:
在 Home.js
中加入方法:
componentDidMount() {
let url = 'http://api.iapple123.com/newscategory/list/index.html?clientid=1114283782&v=1.1'
fetch(url, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((res) => {
res.json()
.then((json) =>{
LOG('GET SUCCESS =>',url, json)
})
.catch((e) => {
LOG('GET ERROR then =>',url,e)
})
})
.catch((error) => {
LOG('GET ERROR=>',url, '==>',error)
})
}
componentDidMount()
是在此页面加载完成后由系统调用。
用到的 LOG
需要在 setup.js
添加全局方法 :
global.LOG = (...args) => {
if(__DEV__){
// debug模式
console.log('/------------------------------\\');
console.log(...args);
console.log('\\------------------------------/');
return args[args.length - 1];
}else{
// release模式
}
};
完整的生命周期可以看这个 文档
我们使用 fetch
进行请求数据,你也可以用 这里 的方法进行请求数据。
注意在 iOS
中需要去 Xcode
打开 ATS
。
自定义视图
在 Home
文件夹内创建 SegmentedView.js
先定义一个基础的 View
import React from 'react'
import {
View,
StyleSheet,
Dimensions
} from 'react-native'
const {width, height} = Dimensions.get('window')
export default class SegmentedView extends React.Component {
render() {
const { style } = this.props
return (
<View style={[styles.view, style]}>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
height: 50,
width: width,
backgroundColor: 'white',
}
})
这里的 const {width, height} = Dimensions.get('window')
是获取到的屏幕的宽和高。
然后在 Home.js
加入 SegmentedView
:
import SegmentedView from './SegmentedView'
render() {
return (
<View style={styles.view}>
<NavigationBar
title="首页"