美文网首页React Native 进阶学习编程
react Native从入门到深入一 RN嵌套在原生项目

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

作者: Zax_Smile | 来源:发表于2017-02-24 09:42 被阅读524次

    很多时候,在开发过程中,不是全部都用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 重载 一下。

    相关文章

      网友评论

      本文标题:react Native从入门到深入一 RN嵌套在原生项目

      本文链接:https://www.haomeiwen.com/subject/xkrcuttx.html