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

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

看下效果