ios 原生应用和React native 结合开发1.环境搭建

最新推荐文章于 2024-09-19 10:29:13 发布

qqq644755786

最新推荐文章于 2024-09-19 10:29:13 发布

阅读量506

点赞数

文章标签： ios 原生应用 react native

本文链接：https://blog.csdn.net/qqq644755786/article/details/51880488

版权

1.环境搭建。参考教程：http://www.tuicool.com/articles/V3U3UbU 常见的环境问题可以参考此网站http://www.jianshu.com/p/fa0c19a31656

按照教程我们初始化了helloworld项目。路径为/usr/local/Cellar/nvm/0.29.0/HelloWorld 但是大家会发现使用react-native init AwesomeProject创建 react native很慢这个解决方式如下：编辑 ~/.npmrc 加入下面内容registry =https://registry.npm.taobao.org 重启下命令行.

可以直接用－更改镜像文件。

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

步骤如下：

1.sudo npm install -g react-tools 安装react-tools

2.sudo npm install -g react-native-cli

3.react-native init HelloWorld

这样就在这个目录下创建了helloWorld的项目了。（我的路径为:/usr/local/Cellar/nvm/）可以就在此目录下面开发。也可集成原生项目！将此目录的node_modules的文件夹拷贝到自己的原生项目下面。如下

2.可以看到这个目录：

这个node_modules目录将其拷贝到自己项目的根目录。

3.打开Podfile 文件输入

#react native
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]

4 pod install 安装

5.按照如图所示的建代码，

会一点iOS开发的人应该看的懂就不细说怎么创建了。

js的代码如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

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

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

在ReactNative1VC里面添加代码

#import "ReactNative1VC.h"
#import "RCTRootView.h"


@interface ReactNative1VC ()
@end

@implementation ReactNative1VC

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSURL *jsCodeLocation;
    
    [[RCTBundleURLProvider sharedSettings] setDefaults];
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"HelloWorld"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    rootView.frame=[UIScreen mainScreen].bounds;
    [self.view addSubview:rootView];
    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

运行之后出现如下图：