1.removeClippedSubviews
用于提升大列表的滚动性能。需要给行容器添加样式overflow:’hidden’。（Android已默认添加此样式）此属性默认开启
这个属性是因为在早期 ListView 在数据到达一定程度的时候就会越来越卡，最终导致 APP 崩溃退出，使用这个属性后 APP 崩溃确实在一定程度上得到缓解，但是卡顿问题还是依旧存在。
废了这么多话，这边我们就先来使用一下 removeClippedSubviews ，很简单，使用它只需要在我们封装的 cell 中的 Container 样式中添加 overflow:'hidden' 即可。
GDCommunalCell.js
container: {
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
backgroundColor:'white',
height:120,
width,
borderBottomWidth:0.5,
borderBottomColor:'gray',
marginLeft:15,
overflow:'hidden',
},
GDHome.js
<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
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 中添加下面一行代码
compile "com.facebook.fresco:animated-gif:0.13.0"
4.去除 Android 中输入框的下划线
那么 Android 中的 TextInput 的下划线是不是丑爆了？这边我们也来处理下它，直接使用 underlineColorAndroid 这个属性，让他为透明即可。
underlineColorAndroid={'transparent'}
{/* 左边 */}
<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
/**
* 公共导航组件
*/
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
// 引入 公共导航组件 import NavigationBar from './GDNavigationBar';
<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 开发中你可能需要的一些小玩意
拨打电话(真机测试，模拟器没有打电话功能)：
import { Linking } from ‘react-native’;
function callPhone() {
return Linking.openURL('tel:10086');
}
获取视图组件的 x，y，宽，高,偏移量的值，可以使用 measure 方法：
this.refs.mainView.measure((x, y, width, height, px,py)) => {
console.log(width);
}
.