在React-Native里面，如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈，不得不放弃通过触发render的方式来改样式，而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果
setNativeProps可直接改变属性而不调用render方法
使用条件：
在（不得不）频繁刷新而又遇到了性能瓶颈的时候,直接操作组件并不是应该经常使用的工具。一般来说只是用来创建连续的动画，同时避免渲染组件结构和同步太多视图变化所带来的大量开销。setNativeProps是一个“简单粗暴”的方法，它直接在底层（DOM、UIView等）而不是React组件中记录state，这样会使代码逻辑难以理清。所以在使用这个方法之前，请尽量先尝试用setStateshouldComponentUpdate方法来解决问题。
例:用setNativeProps来改变style（背景色和高度）
_onTouchStart(){
this._refButton.setNativeProps({
style:{backgroundColor:'blue',height:300}
})
}
_onTouchEnd(){
this._refButton.setNativeProps({
style:{backgroundColor:'red',height:200}
})
}
render() {
return (
<View ref={(c) => this._refButton = c}
style={styles.container}
onTouchStart={(e) => this._onTouchStart(e)}
onTouchEnd={(e) => this._onTouchEnd(e)}>
<Text> 点击测试 setNativeProps </Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
//flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
height:200,
},
QQ20170425-183139.gif
so 问题来了 很生硬的有木有，能不能加点过渡效果啊
Of course
这就用到了LayoutAnimation，可以和iOS原生的媲美，666
LayoutAnimation只对于布局的创建和更新事件才起作用，然而删除事件是不支持的。
-
LayoutAnimation有以下三种动画效果类型:
- caseInEaseOut
- linear
- spring
如果你在Android设备上面进行测试，那么就需要开启动画设置，iOS设备默认打开。具体代码如下:
// Enable LayoutAnimation under Android
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true)
}
- 当我们布局需要更新的时候，使用LayoutAnimation进行设置一下动画配置即可如下:
componentWillUpdate() {
console.log('componentWillUpdate...');
LayoutAnimation.easeInEaseOut();
LayoutAnimation.linear();
LayoutAnimation.spring();
//或
LayoutAnimation.configureNext(CustomLayoutAnimation);
}
- duration 动画持续的时间(毫秒)
- create 创建一个新视图所使用的动画
- update 当视图被更新的时候所使用的动画
- Types : spring,linear,easeInEaseOut,easeIn,easeOut,keyboard
- Properties : opacity,scaleXY
var CustomLayoutAnimation = {
duration: 10,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.easeInEaseOut,
},
delete:{
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
}
};
以上是LayoutAnimation的介绍及声明
我们只需要在需要的地方加上
LayoutAnimation.configureNext(CustomLayoutAnimation
这一句即可
_onTouchStart(){
this._refButton.setNativeProps({
style:{backgroundColor:'blue',height:300}
});
LayoutAnimation.configureNext(CustomLayoutAnimation);
}
_onTouchEnd(){
this._refButton.setNativeProps({
style:{backgroundColor:'red',height:200}
});
LayoutAnimation.configureNext(CustomLayoutAnimation);
}
QQ20170425-185047.gif
