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> }

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

看下效果