A.ネイティブiOSの統合プロジェクトは、ネイティブに反応します

このようRNProjectなどの新しいフォルダを作成し、次に/ IOSのサブフォルダを作成し、既存のiOSファイルにプロジェクト全体をコピーします。
以下のように、RNProject package.jsonのルートディレクトリにファイルを作成します。

{
  "name": "RNProject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

、ターミナルを開き、プロジェクトのルートディレクトリにcdし、以下のコマンドを実行してネイティブモジュールを統合REACT：

$ yarn add react-native

ボックス待っている赤い通知の1つのステップの後に、指定されたバージョンの反応に依存する必要性を表明しました。私たちは、反応する次のコマンドを統合要件のバージョン番号が厳密にプロンプトを実行する必要があり注意してください。

$ yarn add [email protected]

このとき、すべてがnode_modulesの下に統合/ディレクトリに依存している、gitのバージョン管理を行い、このフォルダ内のすべてのファイルをアップロードするべきではありませんが、他の協力者にも依存関係を追加するには、上記のコマンドを実行することができます。だから、.gitignoreファイルにnode_modules /ディレクトリレコードは、必要があります。

cocoaPodsによってiOSのプロジェクトへのネイティブな統合を反応します。デフォルトでは、すでに精通してインストールcocoaPodsです。ターミナルでは、CDに/ IOSディレクトリの初期化cocoaPodsを下げます：

$ pod init

Podfileは、ファイル、編集、次を開きます。

# The target name is most likely the name of your project.
target 'RNProject' 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',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

注ターゲットのRNProjectは、「iOSのプロジェクトの名前ではなく、ルートディレクトリ名で行うが、ここで私のルートディレクトリにあるとiOSのプロジェクト名RNProjectです。
Podfileを保存した後、インストールを開始するには、次のコマンドを実行します。

$ pod install

これまでのところ、それは成功しました既存のRNのiOSプロジェクトを統合した、次のように、プロジェクトファイルが構成されています。
ここに画像を挿入説明

II。ネイティブページジャンプRN

Appleは安全でないHTTPリンクへのアクセスをブロックします。私たちは、iOSプロジェクトのInfo.plistファイルを追加する必要があります。

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

ここに画像を挿入説明

ファイルとしてルートディレクトリにindex.jsファイルを作成するには、iOSのネイティブの入り口に反応します。そして、次のように入力します。

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

class Hello extends React.Component {
  render() {
  	var {name} = this.props
    return (
      <View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}>
      	<Text>Hello {name}!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('Hello', () => Hello);

Xcodeで、ViewControllerをを作成し、次のように入力します。

#import "ViewController.h"
#import <React/RCTRootView.h>

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    button.center = self.view.center;
    [button setTitle:@"跳转RN" forState:0];
    [button setTitleColor:[UIColor greenColor] forState:0];
    [button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)clickButton:(UIButton*)button{
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"Hello"
                         initialProperties: @{@"name":@"React Native"}
                             launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

@end

ルートディレクトリで次のコマンドを使用してスタートRNパッケージャ

npm start

Xcodeプロジェクトで実行した後、「ゴーRN」をクリックした後に実行すると、両方がこんにちはネイティブRNが達成リアクト表示するためにジャンプします！ページ：

III。表示クレソンの人気映画リスト

各ページには、別のjsファイルに対応している必要があり、クリアファイル構造の後に保持する大きなプロジェクトを防ぐために、我々は、人気映画のリストについては、以下のディレクトリとファイルを作成：./ HotMovie.js中のsrc /ページ/ HotMovie.jsを、次のように入力します。

import React, {Component} from 'react';
import {StyleSheet, Image, Text, View, FlatList} from 'react-native';

var REQUEST_URL = "https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0"

export default class HotMovie extends Component<Props> {

  constructor(props){
    super(props);
    this.state = {
      movies:null,
    }

    this.fetchData = this.fetchData.bind(this)
  }

  componentDidMount(){
    this.fetchData()
  }

  fetchData(){
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          movies:responseJson.subjects
        });
      })
  }

  render() {
    if (!this.state.movies) {
      return this.renderLoadingView();
    }
    return (
      <FlatList
        data={this.state.movies}
        renderItem={this.renderMovie}
        style={styles.list}
        keyExtractor={item => item.id}
      />
    );
  }


  renderLoadingView(){
    return (
      <View style={styles.container}>
        <Text>
          正在加载...
        </Text>
      </View>
    )
  }


  renderMovie({item}){
    return(
      <View style={styles.item}>
        <Image source={{url:item.cover}} style={styles.thumbnail}/>
        <View style={styles.itemRight}>
          <Text>{item.title}</Text>
          <Text>{item.rate}</Text>
        </View>
      </View>
    )
  }


}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  item:{
    marginTop:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent: 'center',
    height:100,
    backgroundColor:'lightgray'
  },
  thumbnail:{
    width:53,
    height:81,
    backgroundColor:'lightgray'
  },
  itemRight:{
    flex:1,
    height:100,
    justifyContent: 'center',
    alignItems:'center'
  },
  list: {
    paddingTop: 50,
    backgroundColor: "#F5FCFF"
  }
});

次のように2は、index.js日時：

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import HotMovie from './src/page/HotMovie';

AppRegistry.registerComponent('HotMovie', () => HotMovie);

3、次の一次ボタンクリックイベント：

- (void)clickButton:(UIButton*)button{
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"HotMovie"
                         initialProperties: nil
                             launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

図3に示すように、操作後の図の効果：
ここに画像を挿入説明