React-Native 之 GD （二十）removeClippedSubviews / modal放置的顺序 / Android 加载git图\动图 / 去除 Android 中输入框的下划线 / navigationBar

1.removeClippedSubviews

用于提升大列表的滚动性能。需要给行容器添加样式overflow:’hidden’。（Android已默认添加此样式）此属性默认开启

这个属性是因为在早期 ListView 在数据到达一定程度的时候就会越来越卡，最终导致 APP 崩溃退出，使用这个属性后 APP 崩溃确实在一定程度上得到缓解，但是卡顿问题还是依旧存在。

废了这么多话，这边我们就先来使用一下 removeClippedSubviews ，很简单，使用它只需要在我们封装的 cell 中的 Container 样式中添加 overflow:'hidden' 即可。

GDCommunalCell.js

?

1 2 3 4 5 6 7 8 9 10 11 12

container: {     flexDirection:'row',     alignItems:'center',     justifyContent:'space-between',     backgroundColor:'white',     height:120,     width:width,     borderBottomWidth:0.5,     borderBottomColor:'gray',     marginLeft:15,     overflow:'hidden', },

GDHome.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<PullList                                               // 将ListView 改为 PullList     ref="pullList"                                      // 一键置顶     onPullRelease={(resolve) => this.loadData(resolve)} // 下拉刷新操作     dataSource={this.state.dataSource}                  // 设置数据源     renderRow={this.renderRow.bind(this)}               // 根据数据创建相应 cell     showsHorizontalScrollIndicator={false}              // 隐藏水平指示器     style={styles.listViewStyle}                        // 样式     initialListSize={7}                                 // 优化：一次渲染几条数据     renderHeader={this.renderHeader}                    // 设置头部视图     onEndReached={this.loadMore}                        // 当接近底部特定距离时调用     onEndReachedThreshold={60}                          // 当接近底部60时调用     renderFooter={this.renderFooter}                    // 设置尾部视图     removeClippedSubviews={true}                        // 优化 />

 

2.modal放置的顺序

这边我们试了下安卓，发现当我们显示 modal 然后又关闭 modal 的时候，就会出现 ListView 列表消失的问题，那么其实是因为我们 modal 放置的顺序问题，modal 应当放置到所有主视图之后创建，避免它影响其他视图显示，这边就以 home 页面为例，其他视图自己实现哈：

GDHome.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

render() {     return (         <View style={styles.container}>             {/* 导航栏样式 */}             <CommunalNavBar                 leftItem = {() => this.renderLeftItem()}                 titleItem = {() => this.renderTitleItem()}                 rightItem = {() => this.renderRightItem()}             />               {/* 根据网络状态决定是否渲染 listView */}             {this.renderListView()}               {/* 初始化近半小时热门模态 */}             <Modal                 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                 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>     ); }

 

3.Android 加载git图\动图

那其实解决这个问题很简单，我们只需要使用一下 facebokk 的一个强大的图片加载库就能解决这个问题了。

首先，我们打开 build.gradle ，在 dependencies 中添加下面一行代码

?

1	compile "com.facebook.fresco:animated-gif:0.13.0"

 

4.去除 Android 中输入框的下划线

那么 Android 中的 TextInput 的下划线是不是丑爆了？这边我们也来处理下它，直接使用 underlineColorAndroid 这个属性，让他为透明即可。

?

1	underlineColorAndroid={'transparent'}

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{/* 左边 */} <View style={styles.inputViewStyle} >     <Image source={{uri:'search_icon_20x20'}} style={styles.searchImageStyle} />     <TextInput         style={styles.textInputStyle}         keyboardType="default"                            // 键盘类型         placeholder="请输入搜索商品关键字"                // 提示文字         placeholderTextColor='gray'                       // 设置提示文字颜色         autoFocus={true}                                  // 自动获取焦点,弹窗键盘         clearButtonMode="while-editing"                   // 清除按钮(编辑情况下出现清除按钮)         onChangeText={(text) => {this.changeText = text}} // 监听文本改变,将文字返回         onEndEditing={() => this.loadData()}              // 结束编辑状态         underlineColorAndroid={'transparent'}             // 隐藏 input 输入框下划线     /> </View>

5.navigationBar

这边先来介绍一下 navigationBa 的使用，使用它可以让我们只在一个地方管理 navigator 导航栏的样式，就不用像现在这样在每个页面都手动添加导航栏。

首先，我们来看下 navigationBar 文件内的内容：

GDNavigationBar.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

/**  * 公共导航组件  */ import React, { Component } from 'react'; import {     StyleSheet,     Text,     View,     TouchableOpacity, } from 'react-native';   // 导航器 import CustomerComponents, {     Navigator } from 'react-native-deprecated-custom-components';   const styles = StyleSheet.create({   });   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 ：

GDMain.js

?

1 2	// 引入 公共导航组件 import NavigationBar from './GDNavigationBar';

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<TabNavigator.Item     selected={this.state.selectedTab === selectedTab}     badgeText={badgeText == 0 ? '' : badgeText}  // 角标     title={title}     selectedTitleStyle={{color:'black'}}     renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}     renderSelectedIcon = {() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}     onPress = {() => this.clickItem(selectedTab, subscription)}>     <Navigator         // 设置路由         initialRoute = {             {                 name: selectedTab,                 component: component             }         }           // 设置导航动画         configureScene={(route) => this.setNavAnimationType(route)}           renderScene = {(route, navigator) => {             let Component = route.component;             return <Component                         {...route.params}                         navigator={navigator}                         loadDataNumber={() => this.loadDataNumber()} />         }}           navigationBar={NavigationBar}     />    </TabNavigator.Item>

 

效果图：

 

6.react-native 开发中你可能需要的一些小玩意

拨打电话(真机测试，模拟器没有打电话功能)：

?

1 2 3 4 5

import { Linking } from ‘react-native’;   function callPhone() {     return Linking.openURL('tel:10086'); }

获取视图组件的 x，y，宽，高,偏移量的值，可以使用 measure 方法：

?

1 2 3

this.refs.mainView.measure((x, y, width, height, px,py)) => {     console.log(width); }

 

.