File tree Expand file tree Collapse file tree 1 file changed +26
-0
lines changed Expand file tree Collapse file tree 1 file changed +26
-0
lines changed Original file line number Diff line number Diff line change 10102 . [ D2: React Native import 文件的小技巧 (2016-8-19)] ( #d2react-native-import-文件的小技巧-2016-8-19 )
11113 . [ D3: React Native 真机调试 (2016-8-22)] ( #d3react-native-真机调试-2016-8-22 )
12124 . [ 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+
2551D4: React Native 函数的绑定 (2016-8-23)
2652----
2753在ES6的class中函数不再被自动绑定,你需要手动去绑定它们。
You can’t perform that action at this time.
0 commit comments