RN开发问题总结备忘

---

目录

---

1）通知的用法

//此组件接收广播
componentDidMount() {
   //注册通知
   this.subscription = DeviceEventEmitter.addListener('refresh',()=>{
      this.BUS_100201_REQ();
    });
}
componentWillUnmount() {
    // 移除通知
    this.subscription.remove();
},

//其他组件发送广播
//发送通知刷新banner页面
DeviceEventEmitter.emit('refresh');

---

2）回调函数传入参数以区分点击

onPress={this.handlePress}  //回调函数如何传入参数以区分点击呢？
onPress={this.handlePress(id)}  //错误，这样会在声明时执行！
onPress={()=>this.handlePress(id)}    //正确
onPress={this.handlePress.bind(this,id)}  //正确
//箭头函数或bind都会生成新函数。传入参数以闭包形式“封存”，留待调用。

---

3）react-navigation

//跳转,注意就算参数为空，也要传个空对象{}，否则下页面获取时需判断this.props.navigation.state.params是否为undefined
this.props.navigation.navigate('Home',{xxx:'1'});
//下个页面获取参数
this.props.navigation.state.params.xxx
//跳转后关闭自己
this.props.navigation.goBack(); 
this.props.navigation.navigate('Home',{});

---

4 setState()

• this.setState为异步方法，在setState()后立即打印this.state.xxx可能是错误数据，可使用回调函数

// 1-你可以在 render方法里取
// 2-如下
this.setState({
  data:xxx
},()=>{
  console.log('完成setState后回调')
});

---

5 父子组件刷新方式

组件刷新机制
生命周期详解

一个组件在加载完毕后，如果既没有外部驱动，也没有内部驱动，是不会进行重新渲染的。
组件的数据传递需要由渲染来驱动，而不是由数据的变化来驱动的。因此父组件要传递数据给子组件，第一步是要触发父组件对自身的重新render

组件刷新有两种方法:

方式	说明
内部驱动	setState()
外部驱动	父组件通过给子组件传递数据（属性）告知子组件有可能需要重新渲染，子组件自己根据传来的数据（在componentWillReceiveProps方法中）决定是否有必要进行重新渲染

生命周期

• 子组件刷新父组件

方式	说明
{this.onMsgByCallAndMsg(msg)} }/>	回调函数
DeviceEventEmitter	通知

• 父组件刷新子组件

  //传递常量
 //传递state

父组件重新render会触发子Component组件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end

  //传递常量

父组件重新render会触发子PureComponent组件的
componentWillReceiveProps-> @end

 传递state

父组件重新render会触发子PureComponent组件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end

---

6 定时器

setToggleTimeout(){
    this.timer = setTimeout(
        ()=>{
            console.log('延时器..')
            this.setState({animating: !this.state.animating});
            this.setToggleTimeout();
        },1000
    )
}
componentWillUnmount() {
  this.timer && clearTimeout(this.timer);
}

---

7 通过URL打开App某页面

• 配置RN路由代码

    //react-navigation路由配置
    GK_Home:{
        screen:GK_Home,
        //注册此页面的url路由，并配置其参数name和age
        path:'app/GK_Home/:name/:age'
    },

• 配置iOS-schemes

  
  
  

  配置schemes
• 在~/AppDelegate.m中插入代码

#import 
...
//- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
//  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
//  return [RCTLinkingManager application:application openURL:url
//                      sourceApplication:sourceApplication annotation:annotation];
//}

-(BOOL)application:(UIApplication*)app openURL:(NSURL*)url options:(NSDictionary*)options{
  return [RCTLinkingManager application:app openURL:url
                      sourceApplication:nil annotation:nil];
}

• 测试(Webview内部，或Safair都可打开并获取参数)

    
    
        
            
            
        
    
        
            

            
            
            tgftgf

    

演示

---

8 SVG的使用

RN不支持svg，需要依赖库react-native-svg

使用 msvgc将svg转换为js组件

msvgc

• 生成的文件如下：
  注意：要将内部生成的xlink:href修改为href，否则rn运行会报错！

  
  
  

  屏幕快照 2018-03-02 下午5.05.21.png

import Test from '../../svg/Test';
render(){
  return(
    ...
    
    ...
  )
}
...

结果

注意：目前这种方式如果svg图像有阴影或渐变，是无法支持的，纯色图像是可以的

非纯色图像会展示出这种效果

---

参考资料

---