react native与存活的应用程序集成

图片 1

(1)通过cocopods 集成 ,以下内容
参考 http://wiki.jikexueyuan.com/project/react-native/integration-existing.html

简介

Pop
是一个可扩展的动画片引擎,可用于贯彻任意iOS对象的任意属性的动态变化,帮助一般动画,弹性动画及潜移默化动画三栽类型.

  • 列主页: pop

  • 新颖示例: 点击下载

  • 留神:
    官方代码中,并无包含实例,而是用来编译的持有源代码,提出活动新建工程,并结合下文的代码有查看效果.

     

入门

由于 React
并没做出关于你此外技巧堆栈的而——常常在 MVC 中略的用 V 来代表——这很爱嵌入到现有
non-React Native
应用程序中。事实上,它跟此外的最佳实践社区工具并了,如 CocoaPods

安装

需求

通过CocoaPods安装

pod 'pop', '~> 1.0'

用 CocoaPods 安装 React Native

CocoaPods 是 iOS/Mac
开发的管理工具包。我们要由此她来下充斥 React Native。借使你还没设置
CocoaPods,请查看本教程

当你准备利用 CocoaPods
工作时,添加以下行到 Podfile 中。假如您无,那么当您的品种的到底目录下创造它。

    pod 'React'
    pod 'React/RCTText'
    # Add any subspecs you want to use in your project

记安装具有你待之
subspecs。没有 pod 'React/RCTText'<Text> 元素不可能使用。

接下来安装你的 pods:

$ pod install

使用

以急需使用POP的地方,引入头文件:

#import <pop/POP.h>

开创而的 React Native 应用程序

来些许块你用设置:

  1. 根 JavaScript 文件,该文件拿富含实际的 React Native
    应用程序和其他零件
  2. 包装 Objective – C
    代码,将加载脚论并创制一个 RCTRootView 来显示和治本而的 React
    Native 组件

率先,为您的应用程序的 React
代码创立一个索引,并创制一个简短的 index.ios.js 文件:

$ mkdir ReactComponent
$ touch index.ios.js

为 index.ios.js 复制 & 粘贴以下 starter 代码——它是一个 barebones React
Native 应用程序:

'use strict';
var React = require('react-native');
var {
  Text,
  View
} = React;
var styles = React.StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
class SimpleApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is a simple application.</Text>
      </View>
    )
  }
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp 将凡公的模块名称,这将将来边使用。

动画片的开,停止 与 更新

拿动画长到你想假设持有动态变化的目的方面,即可最先动画:

POPSpringAnimation *anim = [POPSpringAnimation animation];
...
[layer pop_addAnimation:anim forKey:@"myKey"];

得遵照最先动画时传出的键,来移除对应的动画片:

[layer pop_removeAnimationForKey:@"myKey"];

起始动画时传出的键,也得以用来查询是否在有动画.更新一个方推行之卡通的
toValue,可以无缝实现动画效果间的连通:

anim = [layer pop_animationForKey:@"myKey"];
if (anim) {
  /* 更新toValue为一个新值. */
  anim.toValue = @(42.0);
} else {
  /* 创建并开始一个新的动画. */
  ....
}

地方的例证是以图层为例.Pop是坐NSObject的扩充情势贯彻之.也就是说:
任何NSObject及其子类都可通过Pop添加动画效果.

将容器视图添加到公的应用程序中

今天,你应当也 React Native
组件添加一个容器视图。在你的应用程序中它好是此外的 UIView

图片 2

而是,为了使代码简洁,让咱把 UIView 归入子类。让大家管其命名吧 ReactView。打开你的Yourproject.xcworkspace,并成立一个初类 ReactView(你可拿它们取名吧任何你喜欢的名:))。

    // ReactView.h
    #import <UIKit/UIKit.h>
    @interface ReactView : UIView
    @end

当一个视图控制器中,想就算管住即无异视图,继续累加一个开口并将这连续:

    // ViewController.m
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet ReactView *reactView;
    @end

当此地自己大概的剥夺了 AutoLayout。在实质上产品被,你当团结打开
AutoLayout,并且安装约。

动画类型

起四种动画类型: 弹性动画,渐弱动画,基础动画以及于定义动画.

呢容器视图添加 RCTRootView

备好习太有意思之及时有些了吧?现在我们以在公的 React Native
应用程序存在的职位成立 RCTRootView

在 ReactView.m 中,我们先是要为此 index.ios.bundle 的 URI
启动 RCTRootViewindex.ios.bundle 将让 packager 成立,并出于 React
Native 服务器服务,那将当稍后研讨。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// To generate that file, run the curl command and add the output to your main Xcode build target:
//
//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                                 launchOptions:nil];

下一场把它们看成 ReactView 的子视图添加。

[self addSubview:rootView];
rootView.frame = self.bounds;

弹性动画

弹性动画,能够叫目的一个来精力之弹跳效果.下边的例子中,我们下弹性动画来使图层的底限框值从它的近日价值变化为(0,
0 ,400, 400):

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
[layer pop_addAnimation:anim forKey:@"size"];

开头开发服务器

每当绝望目录,我们需要启动 React Native 开发服务器。

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

其一命令将以大家的 CocoaPods 依赖中启动一个 React Native
开发服务器,来创造捆绑脚本。——root 选项注脚 React Native
应用程序的根本——这将是我们包含单一 index.ios.js 文件的 ReactComponents目。该运行的服务器将由此 http:/ / localhost:8081 / index.ios.bundle 把 index.ios.bundle 打包改成可看的文件。

潜移默化动画

潜移默化动画,可以吃对象缓慢地为止变化.上边的事例,我们设图层的横坐标从此时此刻价为1000如素每秒的快慢日益变:

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(1000.);
[layer pop_addAnimation:anim forKey:@"slide"];

编译和运转

现编译并运行而的应用程序。你将看到你的 React Native
应用程序在 ReactView 内部运转。

图片 3

Live 也自模拟器重新加载工作!你已获取了一个简练的了封闭装于
Objective–C UIView 子类中的 React 组件。

基础动画

基本功动画可以据此来在指定的时段动态改变属性之值.在默认的时空周期内动态为视图的透明度从0.0变化及1.0来兑现淡入的效益:

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];

(2)通过项目应用的点子并

    (1)将react native 整个文件夹copy到路之目文件中

   
(2)将急需以的库房一个一个增长引用,库皆以react-native/Libraries目录中

   
(3)可是是主意的编译仍然有点问题,index.os.js都未可知一心脱离开,不精晓啊起react-native自己搭建之后台

 

从今定义动画

POPCustomAnimation 用来创立于定义动画以及联网效果.它经过管住
CADisplayLink 来保管时间与动画片的关联性.更多细节,详见头文件.

动画属性

卡通属性由POPAnimatableProperty仿佛管理,用来指定在何人属性上采取动画效果.在底下的例子中,我们成立了一个弹性动画,并且展现设置动画属性也跟-[CALayer bounds]对应之属性:

POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];

是框架爱预先实现了了不少图层和视图共用的卡通片属性,你得在协调之类型遭到一直使用.你吗能够通过成立POPAnimatableProperty接近的实例,来创立一个自定义的动画属性.下边的例证中,我们定义了一个自定义的volume动画属性:

prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop) {
  // 读取动画属性的值
  prop.readBlock = ^(id obj, CGFloat values[]) {
    values[0] = [obj volume];
  };
  // 设置动画属性的值.
  prop.writeBlock = ^(id obj, const CGFloat values[]) {
    [obj setVolume:values[0]];
  };
  // 力学上的临界值
  prop.threshold = 0.01;
}];

anim.property = prop;

网预定义的卡通片属性也是由于方例子的体制定义的,自定义动画属性时,很有借鉴价值.完整的预定义的动画属性列表和她们落实之具体细节参见POPAnimatableProperty.h:

/**
 图层(CALayer)通用动画属性.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;

/**
 图形层(CAShapeLayer)通用动画属性.
  */
extern NSString * const kPOPShapeLayerStrokeStart;
extern NSString * const kPOPShapeLayerStrokeEnd;
extern NSString * const kPOPShapeLayerStrokeColor;
extern NSString * const kPOPShapeLayerFillColor;

/**
 视图约束(NSLayoutConstraint)通用动画属性.
  */
extern NSString * const kPOPLayoutConstraintConstant;

/**
 视图(UIView)通用动画属性.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;

/**
 滚动视图(UIScrollView)通用动画属性.
 */
extern NSString * const kPOPScrollViewContentOffset;
extern NSString * const kPOPScrollViewContentSize;
extern NSString * const kPOPScrollViewZoomScale;
extern NSString * const kPOPScrollViewContentInset;

/**
 列表(UITableView)通用动画属性.
 */
extern NSString * const kPOPTableViewContentOffset;
extern NSString * const kPOPTableViewContentSize;

/**
 集合视图(UICollectionView)通用动画属性.
 */
extern NSString * const kPOPCollectionViewContentOffset;
extern NSString * const kPOPCollectionViewContentSize;

/**
 导航栏(UINavigationBar)通用动画属性.
 */
extern NSString * const kPOPNavigationBarBarTintColor;

/**
 工具栏(UIToolBar)通用动画属性.
 */
extern NSString * const kPOPToolbarBarTintColor;

/**
 标签栏(UITabBar)通用动画属性.
 */
extern NSString * const kPOPTabBarBarTintColor;

/**
 标签(UILabel)通用动画属性.
 */
extern NSString * const kPOPLabelTextColor;

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注