react_native 项目实战 (6) 趋势页面 列表抽取 popover使用

父控件 更新子控件 通过属性传值

现在写趋势页面. 其实趋势页面和最热页面都差不多.

趋势页面的导航条是有个popover的控件 所以不是简单的text 需要改造NavigationBar

需要改造NavigationBar.js

//渲染顶部title
renderTitle = () => {
let view = (this.props.title.length != 0) ? (
<Text style={styles.title}>{this.props.title}</Text>) : this.props.titleView;

return <View style={styles.titleWrapper}>
{view}
</View>
}

render() {
return <View style={styles.container}>
<View style={styles.container}>
<StatusBar hidden={false} barStyle="light-content"/>
</View>
{/*顶部导航栏*/}
<View style={styles.navBar}>
<View style={styles.leftBtnStyle}>
{this.props.leftButton}
</View>
{this.renderTitle()}
<View style={styles.rightBar}>
{this.props.rightButton}
</View>

</View>
</View>
}

如果传递过来的title有文本 那么久返回文本 否则 就返回一个传递过来的节点 element.

趋势页面主要代码

renderTitle = () => {
return <TouchableOpacity
activeOpacity={0.5}>
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
<Text style={{color: '#FFF', fontsize: 16}}>趋势</Text>
<Image source={require('../../res/images/ic_spinner_triangle.png')}
style={{width: 12, height: 12, marginLeft: 5}}/>
</View>
</TouchableOpacity>
}

render() {
return <View style={styles.container}>
<NavigationBar
titleView={this.renderTitle()}
></NavigationBar>

</View>
}

效果

拷贝最热页面代码

直接照搬 我这里图省事

//TODU

在这里出现一个问题 数据都是异步获取的. 比如 tab上面的 语言是用asyncStorage异步获取的

那么就必须有个默认的语言列表 但是listview 是同步执行的 setState后 界面没有刷新,

先跳过这个问题

这里照搬之后请求的链接不能一样 使用GitHubTrending

https://github.com/trending 趋势页面

https://github.com/crazycodeboy/GitHubTrending github 地址

安装

npm install GitHubTrending –save

import GitHubTrending from ‘GitHubTrending’; 引入

请求连接的时候用这个请求

//加载数据
loadData = () => {
this.setState({isLoading: true});
new GitHubTrending().fetchTrending(`https://github.com/trending/${this.props.tabLabel}?since=daily`)
.then(value => {
//更新dataSource
this.setState({
dataSource: this.state.dataSource.cloneWithRows(value),
isLoading: false,
});
}).catch((error) => {
console.error(error);
}).done();

列表的item 可以复用 但是 有些区别 那么我把原来的item 修改下. 一个是作为趋势页面的item 一个是作为最热页面的item. 另外一个就是作为趋势的item



都是些重复的东西了

趋势顶部点击popover

地址

https://github.com/jeanregisser/react-native-popover

但是不能直接安装 把popover.js下载下来 拷贝到项目中来用

import Popover from ‘../compoent/Popover’

拷贝到compoent包里面 引入使用

showPopover = () => {
console.log(this.refs);
this.refs.button.measure((ox, oy, width, height, px, py) => {
this.setState({
isVisible: true,
buttonRect: {x: px, y: py, width: width, height: height}
});
});
}

closePopover = () => {
this.setState({isVisible: false});
}

render() {
return <View style={styles.container}>
<NavigationBar
titleView={this.renderTitle()}
></NavigationBar>
<ScrollableTabView
tabBarBackgroundColor="#63B8FF"
tabBarActiveTextColor="#FFF"
tabBarInactiveTextColor="#F5FFFA"
tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
{
this.state.languages.map((item, i) => {
// console.log(item);
return (item.checked == undefined || item.checked ?
<TrendingTab {...this.props} key={`tab${i}`} tabLabel={item.name}/> : null)
})
}
</ScrollableTabView>
<Popover
isVisible={this.state.isVisible}
fromRect={this.state.buttonRect}
onClose={this.closePopover}>
<Text>I'm the content of this popover!</Text>
</Popover>
</View>
}

自己写的代码很少 直接照着官方文档一顿拷贝就行..

看下效果