国产精品一二三四主播,国产中文在线,日韩极品一区

首先考慮集成到現(xiàn)有的項(xiàng)目，而不是新建一個(gè)項(xiàng)目從0->100

那么文件目錄是什么樣？
需要配置什么？
包含哪些文件？
等實(shí)現(xiàn)helloworld之后再回過(guò)頭看整體的流程是什么樣？

Paste_Image.png

這里默認(rèn)上一篇文章中的配置都已完成。

－－－－配置－－－－

1、安裝cocoapods

pod安裝：pod init
卸載pod：sudo gem uninstall cocoapods
安裝pod：sudo gem install cocoapods pod setup

2、我們把具體的依賴包記錄在package.json文件中

{
  "name": "rn_testAddRNIntoProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.0.2",
    "react-native": "0.26.1"
  }
}

安裝node_modules/ ,cd到根目錄，執(zhí)行以下命令

npm install

會(huì)有這么一個(gè)文件夾

Paste_Image.png

3、配置Podfile，創(chuàng)建xcworkspace
初始文件目錄（馬賽克的地方一開始沒(méi)有）：

cd 到這個(gè)目錄，然后：pod init

Paste_Image.png

在項(xiàng)目根目錄新建Podfile（已安裝pod）如果pod init一直出錯(cuò)，先不用管它，直接創(chuàng)建Podfile文件，編寫需要的內(nèi)容，再pod install就可以了：

運(yùn)行：pod install

Paste_Image.png

pod 內(nèi)容：

# 這里寫上項(xiàng)目名??
target 'rn_testAddRNIntoProject' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]

end

Subspecs

The list of supported subspec
s are in "node_modules/react-native/React.podspec"
If you want to add the React Native Text library (e.g., for <Text>elements), then you will need the RCTText subspec
If you want the Image library (e.g., for <Image>elements), then you will need the RCTImage subspec

－－－－創(chuàng)建index.ios.js文件－－－－

$ touch index.ios.js

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

－－－－iOS代碼調(diào)用RN代碼－－－－

這里提醒一句：所有使用<>的地方，都先完整寫好<>,再寫參數(shù)，否則很容易忘記補(bǔ)全，新手已經(jīng)自坑幾次了??

在測(cè)試項(xiàng)目中，什么都沒(méi)有，不過(guò)需要添加一個(gè)按鈕的點(diǎn)擊事件：

#import "RCTRootView.h"

- (IBAction)buttonPress:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"rn_testAddRNIntoProject"
                         initialProperties :
     @{
       @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
               ]
       }
                          launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

plist文件中增加以下代碼，用于通過(guò)https SSL/ATL 安全性驗(yàn)證：

<key>NSAppTransportSecurity</key><dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict></dict>