相关内容,所以把能想到的一些常见的东西先讲下。
- redux
数据中,提供了
- json
字段,当这个字段返回为
- hasnexthour
的时候,表示后面还有内容,按钮可以点击,否则不能点击,按照这个思路,我们就来完成这个功能。
- 1
中新增
- state
状态
- isNextTouch
- isNextTouch: false // 下一小时按钮状态
- let isNextTouch = true;
- if (responseData.hasnexthour == 1) { // hasnexthour不为0时 下一小时 按钮可点击
- isNextTouch = false;
- }
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded: true,
- prompt: responseData.displaydate + responseData.rankhour + '点档' + '(' + responseData.rankduring + ')',
- isNextTouch: isNextTouch,
- // 更新按钮状态
- });
- {
- /* 下一小时按钮 */
- } < TouchableOpacity onPress = { () = >this.nextHour()
- }
- disabled = {
- this.state.isNextTouch
- } > <Text style = {
- {
- marginLeft: 10,
- fontSize: 17,
- color: this.state.isNextTouch == false ? 'green': 'gray'
- }
- } > {
- "下1小时" + " >"
- } < /Text>
- </TouchableOpacity >
可以获取到相应的组件,更加灵活地在需要的地方使用, 配合
- ref
可以做到不直接调用
- setNativeProps
直接渲染组件,在某些频繁更新的组件上使用,可以
- render
,不过
- 大大提高性能
不要为了使用
- 千万
而使用,某些情况下可能会适得其反。
- setNativeProps
- test() {
- this.refs.testText.setNativeProps({
- style: {
- backgroundColor:'green'
- }
- })
- }
- <Text ref="testText">快,说我帅</Text>
中当我们点击
- APP
2 个
- 首页和海淘
时,会马上获取最新数据个数然后进行更新,这边来实现一下这个功能。
- Item
界面注册通知
- home
- // 组件加载完成
- componentDidMount() {
- // 注册通知
- this.subscription = DeviceEventEmitter.addListener('clickHomeItem', () => this.clickTabBarItem());
- }
- componentWillUnmount() {
- // 注销通知
- this.subscription.remove();
- }
方法逻辑:
- clickTabBarItem
- // 点击了Item
- clickTabBarItem() {
- // 加载最新数据
- this.loadData();
- }
页面,我们修改下点击
- Main
响应的事件:
- Item
点击事件:
- Item
- onPress = { () = >this.clickItem(selectedTab, subscription)
- } >
方法逻辑:
- clickItem
- // 点击了Item
- clickItem(selectedTab, subscription) {
- if (subscription !== "" && this.state.selectedTab == selectedTab) {
- // 发送通知
- DeviceEventEmitter.emit(subscription);
- }
- // 渲染页面
- this.setState({
- selectedTab: selectedTab
- })
- }
参数,不需要订阅的按钮就可以传
- subscription
即可。
- ""
中
- main
的请求方法即可。
- 获取最新数据个数
定义一个属性供外界使用:
- home
- static defaultProps = {
- loadDataNumber: {},
- // 回调
- };
- // 获取最新数据个数
- this.loadDataNumber();
- // loadDataNumber 中的逻辑
- loadDataNumber() {
- // 调用 this.props.loadDataNumber 中保存的代码块
- this.props.loadDataNumber();
- }
的逻辑抽出来放到单独的方法内,这边顺便再介绍
- 获取最新数据个数
怎么同时获取多个
- AsyncStorage
值的方法:
- key
- // 获取最新数据个数网络请求
- loadDataNumber() {
- // 取出id
- AsyncStorage.multiGet(['cnfirstID', 'usfirstID'], (error, stores) => {
- // 拼接参数
- let params = {
- "cnmaxid" : stores[0][1],
- "usmaxid" : stores[1][1],
- };
- // 请求数据
- HTTPBase.get('http://guangdiu.com/api/getnewitemcount.php', params)
- .then((responseData) => {
- this.setState({
- cnbadgeText:responseData.cn,
- usbadgeText:responseData.us
- })
- })
- .catch((error) => {
- })
- });
- }
方法中的内容,实现一下 `` 属性的方法:
- renderTabBarItem
- renderScene = { (route, navigator) = >{
- let Component = route.component;
- return < Component {...route.params
- }
- navigator = {
- navigator
- }
- loadDataNumber = { () = >this.loadDataNumber()
- }
- />
- }}/
上可以说必备功能了,这边
- APP
也有这个功能,所以我们跟着来实现一下。
- 原版APP
的
- ScrollView
方法,将
- scrollTo
设置为 0 即可;因为
- y
是在
- ListView
上进行的二次开发,所以它可以使用
- ScrollView
的所有方法:
- ScrollView
- // 点击了Item
- clickTabBarItem() {
- let PullList = this.refs.pullList;
- // 一键置顶
- PullList.scrollTo({
- y: 0
- });
- }
的一下细节,那就是当用户点击
- TabBarItem
时,可能只是单纯的想进行页面的
- Item
,而不想进行
- 切换或者置顶操作
,那么我们就需要来判断一下什么时候需要刷新,什么时候需要置顶。
- 刷新
中的
- ListView
的偏移量来判断是否需要进行置顶操作,当偏移量大于 1 的时候我们就进行置顶操作,否则的话我们就进行刷新操作。
- Scroll
来告诉用户我们在进行刷新操作,可是
- 滚动小菊花
并没有提供我们这个方法怎么办?那我们就需要分析
- pullList
来找方法解决这个问题(具体方法,可以观看我为各位录制的视频),这边就不多讲了,直接上最终代码:
- 第三方框架的内容
- // 点击了Item
- clickTabBarItem() {
- let PullList = this.refs.pullList;
- if (PullList.scroll.scrollProperties.offset > 0) { // 不在顶部
- // 一键置顶
- PullList.scrollTo({
- y: 0
- });
- } else { // 在顶部
- // 执行下拉刷新动画
- PullList.state.pullPan = new Animated.ValueXY({
- x: 0,
- y: this.topIndicatorHeight * -1
- });
- // 加载最新数据
- this.loadData();
- // 关闭动画
- setTimeout(() = >{
- PullList.resetDefaultXYHandler();
- },
- 1000);
- }
- }
- {
- /* 菜单内容 */
- } < ListView scrollEnabled = {
- false
- } // 关闭滑动功能
- dataSource = {
- this.state.dataSource
- } // 设置数据源
- renderRow = {
- this.renderRow.bind(this)
- } // 根据数据初始化 Cell
- contentContainerStyle = {
- styles.contentViewStyle
- } // 样式
- initialListSize = {
- 16
- } // 一次性渲染几行数据
- / >
跳转动画并不是那么流畅,会出现掉帧卡顿的现象,并不像
- Navigator
那么丝丝顺滑;造成这个的原因是因为
- NavigatorIOS
是在 UI 线程 执行的 动画操作,而
- NavigatorIOS
是在 JS 线程执行的动画,那这样就会 阻塞住 JS 线程,那么怎么去解决这个问题?这边提供 2 种方案:
- Navigator
- InteractionManager.runAfterInteractions(() => {
- this.props.navigator.push({
- component: Search,
- });
- });
在数据到达一定程度的时候就会越来越卡,最终导致 APP 崩溃退出,使用这个属性后 APP 崩溃确实在一定程度上得到缓解,但是卡顿问题还是依旧存在。那等到后面我们会介绍
- ListView
,它将是未来
- FlatList
替代品,主要解决它性能差的,占用内容持续增加的问题,目前还没发布稳定版本,但是经过一段时间测试,我觉得已经可以向大家推荐了,所以在后面的章节中会为各位介绍的。
- ListView
,很简单,使用它只需要在我们封装的 cell 中的
- removeClippedSubviews
样式中添加
- container
即可。
- overflow:'hidden'
- container: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
- backgroundColor: 'white',
- height: 120,
- width: width,
- borderBottomWidth: 0.5,
- borderBottomColor: 'gray',
- marginLeft: 15,
- overflow: 'hidden',
- },
页面为例,其他视图自己实现哈:
- home
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 导航栏样式 */
- } < CommunalNavBar leftItem = { () = >this.renderLeftItem()
- }
- titleItem = { () = >this.renderTitleItem()
- }
- rightItem = { () = >this.renderRightItem()
- }
- />
- {/ * 根据网络状态决定是否渲染listview * /}
- {this.renderListView()}
- {/ * 初始化近半小时热门 * /}
- <Modal pointerEvents={'box-none'}
- animationType='slide'
- transparent={false}
- visible={this.state.isHalfHourHotModal}
- onRequestClose={() => this.onRequestClose()} >
- {/ * 包装导航功能 * /}
- <Navigator
- initialRoute={{
- name:'halfHourHot',
- component:HalfHourHot
- }}
- renderScene={(route, navigator) => {
- let Component = route.component;
- return <Component
- removeModal={(data) => this.closeModal(data)}
- {...route.params}
- navigator={navigator} / >
- }
- }
- />
- </Modal > {
- /* 初始化筛选菜单 */
- } < Modal pointerEvents = {
- 'box-none'
- }
- animationType = 'none'transparent = {
- true
- }
- visible = {
- this.state.isSiftModal
- }
- onRequestClose = { () = >this.onRequestClose()
- } > <CommunalSiftMenu removeModal = { (data) = >this.closeModal(data)
- }
- data = {
- HomeSiftData
- }
- loadSiftData = { (mall, cate) = >this.loadSiftData(mall, cate)
- }
- />
- </Modal > </View>
- );
- }/
,在
- build.gradle
中添加下面一行代码
- dependencies
- compile "com.facebook.fresco:animated-gif:0.13.0"
- // 返回左边按钮
- renderLeftItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pop()
- }
- } > <View style = {
- {
- flexDirection: 'row',
- alignItems: 'center'
- }
- } > <Image source = {
- {
- uri: 'back'
- }
- }
- style = {
- styles.navbarLeftItemStyle
- }
- />
- <Text>返回</Text > </View>
- </TouchableOpacity > );
- }
的下划线是不是丑爆了?这边我们也来处理下它,直接使用
- TextInput
这个属性,让他为透明即可。
- underlineColorAndroid
- underlineColorAndroid = {
- 'transparent'
- }
的使用,使用它可以让我们只在一个地方管理
- navigationBa
导航栏的样式,就不用像现在这样在每个页面都手动添加导航栏。
- navigator
之后,再一起讲这部分内容,所以大家只需要了解一下怎么使用就可以了。
- redux
文件内的内容:
- navigationBar
- let NavigationBarRouteMapper = {
- LeftButton(route, navigator, index, navState) {
- if (index > 0) {
- return (
- <TouchableOpacity
- onPress={() => navigator.pop()}
- >
- <Text>返回</Text>
- </TouchableOpacity>
- )
- }
- },
- RightButton(route, navigator, index, navState) {
- },
- Title(route, navigator, index, navState) {
- return(
- <Text>{route.name}</Text>
- )
- },
- };
- export default (
- <Navigator.NavigationBar
- style={{backgroundColor:'green'}}
- routeMapper={NavigationBarRouteMapper}
- />
- )
使用一下这个
- main文件中
:
- navigationBar
- navigationBar = {
- NavigationBar
- }
- import {
- Linking
- }
- from'react - native';
- function callPhone() {
- return Linking.openURL('tel:10086');
- }
- this.refs.mainView.measure((x, y, width, height, px,py)) => {
- console.log(width);
- }
怎么结合
- react
进行开发,并做个小 Demo,让大家先熟悉一下
- redux
使用,然后就是我们当前的项目 转为
- redux
开发了。
- redux
哪里比较不理解的,好跟着改进一下,尽量使文章和视频更易懂。
- redux
来源: http://www.cnblogs.com/miaomiaoshen/p/6713776.html