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

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

看下效果