今日小部件

其他應用擴展程序

NSArray *imageList = @[@"http://foo.com/bar1.png",
                       @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                 moduleName:@"ImageBrowserApp"
                                          initialProperties:props];

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

class ImageBrowserApp extends React.Component {
  renderImage(imgURI) {
    return (
      <Image source={{uri: imgURI}} />
    );
  }
  render() {
    return (
      <View>
        {this.props.images.map(this.renderImage)}
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => ImageBrowserApp);

NSArray *imageList = @[@"http://foo.com/bar3.png",
                       @"http://foo.com/bar4.png"];

rootView.appProperties = @{@"images" : imageList};

注意：目前，在更新prop後，將不會調用頂級RN組件的JS函數componentWillReceiveProps和componentWillUpdateProps。但是，您可以在componentWillMount函數中訪問新的props。

將屬性從React Native傳遞到本機

屬性限制

跨語言交互的其他方式（事件和本機模塊）

從本機（事件）調用React Native函數

• 由於事件可以從任何地方發送，因此可以在項目中引入意大利面風格的依賴項。
• 事件共享命名空間，這意味著您可能會遇到一些名稱衝突。不會靜態檢測到衝突，這使得它們難以調試。
• 如果您使用相同React Native組件的多個實例，並且希望將它們與事件的視角區分開來，則可能需要引入標識符並將它們與事件一起傳遞（您可以使用本機視圖的reactTag作為標識符） 。

從React Native調用本機函數（本機模塊）

警告：所有本機模塊共享相同的命名空間。創建新名稱時要注意名稱衝突。

佈局計算流程

React Native 中嵌入的本機組件的佈局

嵌入本機的React Native組件的佈局

使用固定大小的React Native內容

// SomeViewController.m

- (void)viewDidLoad
{
  [...]
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:appName
                                            initialProperties:props];
  rootView.frame = CGRectMake(0, 0, self.view.width, 200);
  [self.view addSubview:rootView];
}

具有靈活大小的 React Native 內容

1. 您可以將React Native視圖包裝在ScrollView組件中。這可以保證您的內容始終可用，並且不會與本機視圖重疊。
2. React Native允許您在JS中確定RN應用程序的大小，並將其提供給託管RCTRootView的所有者。然後，所有者負責重新佈置子視圖並保持UI一致。我們通過RCTRootView的靈活模式實現了這一目標。

// RCTRootView.h

typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) {
  RCTRootViewSizeFlexibilityNone = 0,
  RCTRootViewSizeFlexibilityWidth,
  RCTRootViewSizeFlexibilityHeight,
  RCTRootViewSizeFlexibilityWidthAndHeight,
};

警告：在JS和native中創建一個靈活的維度會導致未定義的行為。例如 - 當您在託管RCTRootView上使用RCTRootViewSizeFlexibilityWidth時，不要使頂級React組件的寬度靈活（使用flexbox）。

// FlexibleSizeExampleView.m

- (instancetype)initWithFrame:(CGRect)frame
{
  [...]

  _rootView = [[RCTRootView alloc] initWithBridge:bridge
  moduleName:@"FlexibilityExampleApp"
  initialProperties:@{}];

  _rootView.delegate = self;
  _rootView.sizeFlexibility = RCTRootViewSizeFlexibilityHeight;
  _rootView.frame = CGRectMake(0, 0, self.frame.size.width, 0);
}

#pragma mark - RCTRootViewDelegate
- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
{
  CGRect newFrame = rootView.frame;
  newFrame.size = rootView.intrinsicContentSize;

  rootView.frame = newFrame;
} 

注意：React Native佈局計算在特殊線程上執行，而本機UI視圖更新在主線程上完成。這可能會導致本機和React Native之間的UI不一致。這是一個已知問題，我們的團隊正在努力同步來自不同來源的UI更新。

注意：在根視圖成為某些其他視圖的子視圖之前，React Native不會執行任何佈局計算。如果要隱藏React Native視圖直到其尺寸已知，請將根視圖添加為子視圖並使其最初隱藏（使用UIView的隱藏屬性）。然後在委託方法中更改其可見性。

步驟 1

$ npm install <library-with-native-dependencies> --save

注意：--save或--save-dev標誌對於此步驟非常重要。 React Native將根據package.json文件中的依賴項和devDependencies鏈接您的lib。

步驟 2

$ react-native link

注意：如果您的iOS項目使用CocoaPods（包含Podfile）並且鏈接庫具有podspec文件，則react-native鏈接將使用Podfile鏈接庫。要支持非平凡的Podfiles，請添加＃在此行註釋下添加新pod，以添加到您希望添加pod的位置。

手動鏈接

步驟 1

步驟 2

步驟 3