Skip to content

Commit ffedb1f

Browse files
authored
Update Readme.md
1 parent 715093a commit ffedb1f

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

React Native 每日一学/Readme.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
2. [D2:React Native import 文件的小技巧 (2016-8-19)](#d2react-native-import-文件的小技巧-2016-8-19)
1111
3. [D3:React Native 真机调试 (2016-8-22)](#d3react-native-真机调试-2016-8-22)
1212
4. [D4:React Native 函数的绑定 (2016-8-23)](#d4react-native-函数的绑定-2016-8-23)
13+
5. [D5:React Native setNativeProps使用(2016-8-24)](#d5react-native-setNativeProps使用-2016-8-24)
1314

1415
```
1516
模板:
@@ -22,6 +23,31 @@ D1:标题 (日期)
2223
内容
2324
另外:记得在列表中添加链接
2425
```
26+
D5:React Native setNativeProps使用(2016-8-24)
27+
----
28+
有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是props.
29+
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、 componentWillUpdate 等组件生命周期中的方法。
30+
31+
###使用例子
32+
class MyButton extends React.Component({
33+
setNativeProps(nativeProps) {
34+
this._root.setNativeProps({ //这里输入你要修改的组件style
35+
height:48,
36+
backgroundColor:'red'
37+
});
38+
},
39+
render() {
40+
return (
41+
<View ref={component => this._root = component} {...this.props} style={styles.button}>
42+
<Text>{this.props.label}</Text>
43+
</View>
44+
)
45+
},
46+
});
47+
###避免和render方法的冲突
48+
如果要更新一个由render方法来维护的属性,则可能会碰到一些出人意料的bug。因为每一次组件重新渲染都可能引起属性变化,这样一来,之前通过setNativeProps所设定的值就被完全忽略和覆盖掉了。
49+
50+
2551
D4:React Native 函数的绑定 (2016-8-23)
2652
----
2753
在ES6的class中函数不再被自动绑定,你需要手动去绑定它们。

0 commit comments

Comments
 (0)