ReactNative总结(1)
1.ReactNative如何指定点击事件？经常出现在点击事件中引用组件或者属性引用失败，如何解决？
1.我们如果想给固定模块设置点击事件，则可以在最外层套用一个TouchableOpacity或者其他touch系列组件即可，注意touch内部只能嵌套一个组件，所以如果有多个组件，需要再最外层套一层View。
2.当我们写touch对应的事件时，在事件中引用属性，发现会报找不到等错误，这个地方是需要我们再构造方法里bind一下的。
比如上方这个，有可能就会报this.props.buyUrl引用有问题，此时我们就需要再构造函数里bind一下
2.ReactNative如何实现数据动态绑定？应该放在哪个方法里？
reactNative如果要进行网络数据绑定时，网络请求应该写在componentDidMount这个方法中，而不要写在构造方法里或者render里，这个方法是在render之后执行的，所以不会阻塞UI线程的绘制。
然后在需要用数据时直接绑定对应的数据key即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
renderRow(rowData,selectionId,rowId,hItemId)
{
return
(
style ={{flex:1,flexDirection:
'row'
,height:60,justifyContent:
'space-between'
,alignItems:
'center'
,backgroundColor:
'white'
,marginBottom:15}} onPress={() =>
this
.pressJumpNative(rowData)}>
{rowData.desc}
);
}
|
从上边的代码可以看到我们在绑定数据时也要bind（this)一下。可以通过引用rowData中的任意字段来实现数据绑定。
下边附上的是组件生命周期，以供参考，可以看到componentDidMount方法是在render后执行的。
3.React Native的navigator如何使用？子部件如何共享navigator？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
render(){
var
defaultName =
'BuyModule'
;
var
defaultComponent = BuyModule;
return
(
initialRoute = {{title:
"xxx"
,name:defaultName,component:defaultComponent}}
style={{width:width,height:height}}
configureScene={(route) =>{
var
conf = Navigator.SceneConfigs.HorizontalSwipeJump;
conf.gestures =
null
;
return
conf;
}}
renderScene={(route,navigator) => {
let Component = route.component;
this
.navigator = navigator;
if(route.component){
return }
}}
/>
)
}
|
这样，在每个页面中就可以通过this.props.navigator来引用最外层的navigator了。
4.在有navigator的情况下，如何实现硬件返回执行的是navigator.pop?
给BackAndroid添加监听事件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
componentDidMount(){
BackAndroid.addEventListener(
'hardwareBackPress'
,
this
.handleBack)
}
componentWillUnmount () {
BackAndroid.removeEventListener(
'hardwareBackPress'
,
this
.handleBack)
}
handleBack (){
var
navigator =
this
.navigator;
if
(!navigator)
return
false
;
const routers = navigator.getCurrentRoutes();
if
(routers.length > 1){
const top = routers[routers.length - 1];
if
(top.ignoreBack || top.component.ignoreBack){
//路由由组件上决定这个页面忽略back键
return
true
;
}
const handleBack = top.handleBack || top.component.handleBackl
if
(handleBack){
//路由或组件上决定这个界面自行处理back键
return
handleBack();
}
//默认行为：退出当前界面
navigator.pop();
return
true
;
}
//当前页面为root页面
// if(this.lastBackPressed && this.lastBackPressed + 200 > Datte.now){
// //最近两秒内按过back键,可以退出应用
// NativeCommonTools.onBackPressed();
// return true;
//
// }
return
false
;
}
|