React Native 进阶学习编程

react Native从入门到深入一 RN嵌套在原生项目

2017-02-24  本文已影响524人  Zax_Smile

很多时候,在开发过程中,不是全部都用RN来开发,更多时候是嵌套使用。看了官方的文档和中文翻译文档都不是很详细,自己找了很多,做了一遍,现详细步骤记录下来,以便大家不用那么困难。

第一步  环境搭建

注意

1.Xcode可以正常编写程序并运行。

2.终端必须会。

撒干货开始

1.配置package.json安装依赖包文件

cd到根目录,执行

npm init     创建 跟着提示一步步来主要需要写的是名字和版本,其他的可以默认选项

name 字符串不支持大写字母

成功之后会出现基本的json样式,可以在根目录中创建成功package.json文件

2.添加JS环境

通过npm install --save react  

npm install --save react-native 

运行之后 根目录下多了 node_modules文件夹:

3.添加启动

打开生成的的package.json文件,添加符合

"start" :      "node node_modules/react-native/local-cli/cli.js start"

4.创建Podfile文件

cd 到iOS工程的根目录

pod install  创建Podfile文件,这边包括所需要的react-native依赖库在此配置初始化内容如下:

对你需要的组件进行配置:

cd到根目录

pod install 

pod成功:

5.创建index.iOS.js(rn的入口函数)

touch index.ios.js

穿件index.ios.js文件,使用webstorm 编写

简单方法就是去react-native中copy一份,更改名称就好名字就是package.json里边的name一致。

6.编写代码调用RN

在你需要调用的页面的点击事件中,建立连接

运行点击之后出现:

原因是没有开启服务。

需要开启服务器。 cd的本工程的react-native的文件目录中,

执行npm start  开启服务器。

然后刷新出现:

根据提示说是package.json 错误。

仔细查看,可以找到问题。修改之后 npm install 重载 一下。

上一篇下一篇

猜你喜欢

热点阅读