最近根據(jù)公司的業(yè)務(wù)要求把活動頁面用RN實現(xiàn)了一遍，把遇到的問題記錄下來

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函數(shù)使用的時候添加Content-type,和Accept，否則有可能會無法解析網(wǎng)絡(luò)請求

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不能動態(tài)的設(shè)置
Image控件 source可以使用map的方式直接統(tǒng)一存起來使用的時候直接調(diào)用

//定義
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當(dāng)做一行Row處理
7.動態(tài)渲染，如果其中的View是根據(jù)條件來渲染可以先把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.調(diào)用原生的方法

//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調(diào)用RN
#import <React/RCTEventDispatcher.h>

@interface RNCalliOSAction ()

@end

@implementation RNCalliOSAction

@synthesize bridge = _bridge;

//導(dǎo)出模塊
RCT_EXPORT_MODULE();    //此處不添加參數(shù)即默認(rèn)為這個OC類的名字

//導(dǎo)出方法，橋接到j(luò)s的方法返回值類型必須是void
/*
 iOS支持方法名一樣但是參數(shù)不一樣的方法，視為兩個不同的方法
 但是RN調(diào)用iOS這樣的方法會出錯的
 所以最好別把方法名聲明成一樣的
  */
/**************************************** RN Call iOS ***************************************************/

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

9.iOS向RN傳參數(shù)

//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.發(fā)布的時候要把打包的命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/index.jsbundle --assets-dest ios/

參數(shù)：
--entry-file ：ios 或者 android 入口的 js 名稱，比如 index.ios.js
--platform ：平臺名稱 (ios 或者 android)
--dev ：設(shè)置為 false 的時候?qū)?JavaScript 代碼進行優(yōu)化處理。
--bundle-output,：生成的 jsbundle 文件的所在目錄和名稱，比如 ios/ios.jsbundle。

注意: assets 目錄導(dǎo)入工程中時，要選擇 Create folder references，因為這是圖片素材。文件夾的顏色要是藍(lán)色的
如果打包到相應(yīng)的具體某一個文件的時候把 --entry-file后面跟著相應(yīng)的路徑+文件名，例如：--entry-file Component/Mine/AboutMe.js

添加到項目中

11. 添加react-navigation庫后 “Native module cannot be null.”
    
    1387500-52709ff80ba1f51d.jpeg
    
    項目是原生應(yīng)用嵌入的RN模塊，用pod方式添加的. 添加了react-navigation 一直報錯，原因是缺少 RN 的依賴庫，修改后的Podfile文件如下

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    #'CxxBridge', # 如果RN版本 >= 0.45則加入此行
    'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
    'RCTImage',
    'RCTAnimation',
    #以下是為react-navigation添加的依賴庫
    'ART',
    'RCTActionSheet',
    'RCTAdSupport',
    'RCTGeolocation',
    'RCTPushNotification',
    'RCTSettings',
    'RCTVibration',
    'RCTLinkingIOS',
    # 在這里繼續(xù)添加你所需要的RN模塊
    ]

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

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

以后遇到問題繼續(xù)更新