一、Image、ScrollView、Text、View组件样式集参考
二、Text文本单行显示
多的部分….来省略
//'head'->"...wxyz";'middle'->"ab...yz";'tail'->"abcd...";'clip'->
<Text
ellipsizeMode="tail"
numberOfLines={1}
> {'xxxxx...'}
</Text>
三、获取屏幕长宽
const { height, width } = Dimensions.get('window');
四、不同平台显示不同样式
input: {
margin: 8,
...Platform.select({
ios: {
paddingTop: 20
},
android: {
paddingTop: 0
}
})
},
五、不同平台选择不同组件
const Component = Platform.select({
ios : ()=> <ComponentIOS />,
android : ()=> <ComponentAndroid />
})();
<Component />
六、不同条件显示不同样式
// 1、三元条件运算符
<View style={[styles.base , isTrue ? {} : {}]}></View>
// 2、布尔值并的方式
<View style={[styles.base , isTrue && styles.active]}></View>
七、不同平台运行不同的代码
- 1、安卓平台命名为
xxx.android.js
- 2、IOS平台命名为
xxx.ios.js
使用import xxx from './xxx';
,不同手机平台自动运行该平台代码
八、react native保存图片到手机
- 1、Link
xxxProject/node_modules/React-native/Libraries/CameraRoll
[参考官网link librarys]https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content - 2、保存代码
// 导入
import { CameraRoll } from 'react-native';
// 保存图片代码
CameraRoll.saveToCameraRoll('http://facebook.github.io/react/img/logo_og.png');
九、IOS上TextInput输入框启动键盘后点击空白地方关闭键盘
- 1、给TextInput添加属性:keyboardShouldPersistTaps={false}
- 2、在iOS上点击输入框会打开键盘,点击空白处,键盘就会自动关闭
十、获取设备像素比&最小线宽
StyleSheet.hairlineWidth //这一常量始终是一个整数的像素值(线看起来会像头发丝一样细)
十一、往上轮播
1、往上ScrollView
<ScrollView
ref={_scrollView => this.scrollView = _scrollView}
showsVerticalScrollIndicator={false}
>
...
...
2、轮播变换Y轴
componentDidMount() {
this.ticking = setInterval(() => {
if (this.state.offsetY > 50) {
this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
this.setState({ offsetY: 0 });
} else {
this.setState({ offsetY: this.state.offsetY + 50 });
this.scrollView.scrollTo({ x: 0, y: this.state.offsetY, animated: true });
}
}, 1200);
}
00、React Native性能优化点
- 1、
shouldComponentUpdate
的生命周期函数中判断是否要重新渲染,可以利用辅助工具immutable.js
组件生命周期 - 2、ListView优化相关属性
- a、
initialListSize
首次渲染绘制行数 - b、
pageSize
决定每一帧渲染的行数 - c、
scrollRenderAheadDistance
延迟渲染的距离 - d、
removeClippedSubviews
移除超出屏幕的子视图
- a、
- 2、navigator路由跳转优化
- a、优先执行动画(切屏动画),执行结束后再执行复杂逻辑
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.fetchData(); // to do
});
}
- 3、点击态响应慢;
// 将复杂操作延迟到下一帧来执行
handleOnPress() {
// 谨记使用requestAnimationFrame、setTimeout及setInterval时,
// 要使用TimerMinxin(其作用是在unmount组件时,清楚所有定时器)
this.requestAnimationFrame(() => {
this.fetchData(); // to do
})
}
- 其他优化点
- a、关闭开发模式
- b、去掉不必要的
Require
- c、减少
View
的层次 - d、 去掉
console.log
- e、适当使用动画
11、其他最佳实践优化
1、rn首屏最佳实践