ReactNative总结(1)

来源：互联网发布：nginx sticky 编辑：程序博客网时间：2024/05/01 12:42

1.ReactNative如何指定点击事件？经常出现在点击事件中引用组件或者属性引用失败，如何解决？

1.我们如果想给固定模块设置点击事件，则可以在最外层套用一个TouchableOpacity或者其他touch系列组件即可，注意touch内部只能嵌套一个组件，所以如果有多个组件，需要再最外层套一层View。

2.当我们写touch对应的事件时，在事件中引用属性，发现会报找不到等错误，这个地方是需要我们再构造方法里bind一下的。

比如上方这个，有可能就会报this.props.buyUrl引用有问题，此时我们就需要再构造函数里bind一下

2.ReactNative如何实现数据动态绑定？应该放在哪个方法里？

reactNative如果要进行网络数据绑定时，网络请求应该写在componentDidMount这个方法中，而不要写在构造方法里或者render里，这个方法是在render之后执行的，所以不会阻塞UI线程的绘制。

然后在需要用数据时直接绑定对应的数据key即可。

 renderRow(rowData,selectionId,rowId,hItemId)
    {
        return (
          <TouchableOpacity
              style ={{flex:1,flexDirection:'row',height:60,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginBottom:15}} onPress={() => this.pressJumpNative(rowData)}>
              <Text style={{marginLeft:10}}>{rowData.title}</Text>
 
              <View style={{flexDirection:'row',alignItems:'center',marginRight:10}}>
                  <Text >{rowData.desc}</Text>
                  <Image source = {require('./img/right_arrow.png')} style={{width:10,height:10,marginLeft:10}}/>
              </View>
          </TouchableOpacity>
 
        );
         
    }

从上边的代码可以看到我们在绑定数据时也要bind（this)一下。可以通过引用rowData中的任意字段来实现数据绑定。

下边附上的是组件生命周期，以供参考，可以看到componentDidMount方法是在render后执行的。

3.React Native的navigator如何使用？子部件如何共享navigator？

render(){
        var defaultName = 'BuyModule';
        var defaultComponent = BuyModule;
        return(
            <Navigator
                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 <route.component  navigator = {navigator} {...route.params}/>
                 }
                }}
                />
        )
    }

这样，在每个页面中就可以通过this.props.navigator来引用最外层的navigator了。

4.在有navigator的情况下，如何实现硬件返回执行的是navigator.pop?

给BackAndroid添加监听事件：

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;
 
    }

0 0