RN开发遇到的一些问题总结

最近根据公司的业务要求把活动页面用RN实现了一遍，把遇到的问题记录下来

---

ReactNative 版本0.44.3
Xcode8.3
Android Studio 3.0

1.直接使用fileName.js 即可，不需要使用file.ios.js,iOS和安卓通用
2.Text控件如果手动换行需要添加一个变量，

render() {
        let str = '第一行：\n第二行';
        return (
            <View style={styles.container}>
                <Text style={styles.statement_text}>{str}</Text>
            </View>
        );
    }

3.Fetch函数使用的时候添加Content-type,和Accept，否则有可能会无法解析网络请求

fetch(url,{
            method:'POST',
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',//key-value形式
                "Accept-Encoding": "gzip, deflate",
                "Accept": "application/json",
            },
            body:paramsStr
        })

4.Image控件 source不能动态的设置
Image控件 source可以使用map的方式直接统一存起来使用的时候直接调用

//定义
let imgMap = {
    'h1': require('./Activity1225/Images/section1.png'),
    'h2': require('./Activity1225/Images/section2.png'),
    'h3': require('./Activity1225/Images/section3.png'),
}
//使用的时间
<Image source={imgMap['h1']} style={styles.headerImg}/>

5.控件的引用

ref={component => this._sectionList = component}

6.SectionList使用时不想让Header停留的顶部可以把Header当做一行Row处理
7.动态渲染，如果其中的View是根据条件来渲染可以先把View生成好放在Map里

render() {
        var isSoldOut = false;
        var dynamicDic = {};
        //判断是已售空
        if (isSoldOut){
            dynamicDic['soldOutView'] =  (
                <View style={styles.soldOutView}>
                    <View style={styles.soldOutBgView}>
                        <Text style={styles.soldOutText}>{actionStr}</Text>
                    </View>
                </View>
            )
        }
        //判断是否显示会员价
        if(this.props.showPrice){
            dynamicDic['priceView'] =  (
                <View  style={styles.priceView}>
                    <Text style={styles.merberPriceText}>￥{this.props.topic.TopicPrice}</Text>
                    <Text style={styles.marketPriceText}>￥{this.props.topic.Price}</Text>
                </View>
            )
        }else{
            dynamicDic['priceView'] =  (
                <View  style={styles.priceView}>
                    <Text style={styles.merberOnlyText}>￥会员可见</Text>
                    <Text style={styles.marketPriceText}>￥{this.props.topic.Price}</Text>
                </View>
            )
        }

        return(
            <View style={styles.contentView}>
                {dynamicDic.soldOutView}//条件渲染
                {dynamicDic.priceView}//条件渲染
            </View>
        )
    }

8.调用原生的方法

//React Native import NativeModules
var RNCalliOSAction = NativeModules.RNCalliOSAction;
RNCalliOSAction.callRNiOSAction('params');

OC
//新建一个 RNCalliOSAction文件

//.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RNCalliOSAction : NSObject<RCTBridgeModule>

@end


//.m
#import "RNCalliOSAction.h"
#import <UIKit/UIKit.h>

//iOS调用RN
#import <React/RCTEventDispatcher.h>

@interface RNCalliOSAction ()

@end

@implementation RNCalliOSAction

@synthesize bridge = _bridge;

//导出模块
RCT_EXPORT_MODULE();    //此处不添加参数即默认为这个OC类的名字

//导出方法，桥接到js的方法返回值类型必须是void
/*
 iOS支持方法名一样但是参数不一样的方法，视为两个不同的方法
 但是RN调用iOS这样的方法会出错的
 所以最好别把方法名声明成一样的
  */
/**************************************** RN Call iOS ***************************************************/

RCT_EXPORT_METHOD(callRNiOSAction:(NSString *)urlStr){
    NSLog(@"params:%@",params);
}
@end

9.iOS向RN传参数

//OC
    NSNumber *userType = [SBGUserManger shareUserManager].userInfo.UserType?:@(0);
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://192.168.1.43:8081ActivityDetail.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"Pinhui001B2BRN"
                         initialProperties : @{
                                               @"topic_url":self.Path?:@"",
                                               @"userType":userType,
                                               }
                          launchOptions    : nil];
//RN
componentDidMount() {
     console('userType' + this.props.userType)
}

10.发布的时候要把打包的命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/index.jsbundle --assets-dest ios/

参数：
--entry-file ：ios 或者 android 入口的 js 名称，比如 index.ios.js
--platform ：平台名称 (ios 或者 android)
--dev ：设置为 false 的时候将会对 JavaScript 代码进行优化处理。
--bundle-output,：生成的 jsbundle 文件的所在目录和名称，比如 ios/ios.jsbundle。

注意: assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。文件夹的颜色要是蓝色的
如果打包到相应的具体某一个文件的时候把 --entry-file后面跟着相应的路径+文件名，例如：--entry-file Component/Mine/AboutMe.js

添加到项目中

11. 添加react-navigation库后 “Native module cannot be null.”
    1387500-52709ff80ba1f51d.jpeg
    项目是原生应用嵌入的RN模块，用pod方式添加的. 添加了react-navigation 一直报错，原因是缺少 RN 的依赖库，修改后的Podfile文件如下

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    #'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    'RCTImage',
    'RCTAnimation',
    #以下是为react-navigation添加的依赖库
    'ART',
    'RCTActionSheet',
    'RCTAdSupport',
    'RCTGeolocation',
    'RCTPushNotification',
    'RCTSettings',
    'RCTVibration',
    'RCTLinkingIOS',
    # 在这里继续添加你所需要的RN模块
    ]

12. 添加react-navigation库后 Route '*' should declare a screen

//修改前
class TestScreen extends React.PureComponent
//修改后，添加export default 
export default class TestScreen extends React.PureComponent

以后遇到问题继续更新