导航:首页 > 源码编译 > reactnative电商源码

reactnative电商源码

发布时间:2023-07-23 09:51:19

1. react-native 是怎么实现原生代码的

index.android.js是ReactNative的入口文件,后缀Android表示是在Android平台使用的代码。ReactNative内置了babel,所以可以使用最新的JavaScript语法来开发(ECMAScript6简称es6),不熟悉es6的同学可以看看阮一峰写的这本[e6入门教程](ECMAScript 6入门)。这里我简单介绍一下require,Android程序员可以把require对应到Java的import,使用来导入一个JavaScript模块的。`
var {ToastAndroid} = React`这种写法叫结构赋值,就是从React这个对象中,提取出ToastAndroid这个属性所对应的值,并赋值给ToastAndroid这个变量。可以看出toast模块就是从react-native这个模块中的ToastAndroid属性,js中的Toast模块API和Android中的JavaAPI基本是保持一致的。

2. React 源码(三)使用本地依赖库

在 React 应用中依赖基本上是通过 yarn 或者 npm 进行安装的,但是在看源码的过程中,有的时候想要去调试,或者说打印一些数据,如果可以在本地的 React 应用里面依赖本地的 React 仓库,那么就可以进行上述的操作了。

在 React 官方文档中的开发流程 里面介绍了如何使用本地依赖库。

在启动本地 React 项目的时候出现了以下报错

在将 react-jsx-dev-runtime.development.js 文件复制到 build/node_moles/react/cjs 目录下即可。

3. 如何编译ReactNative示例程序Examples

编译示例程序需要将整个项目导入到androidStudio中,androidStudio导入项目时选择react-native/ReactAndroid目录。

由于项目依赖ndk因此如果要编译Examples还需要安装配置ndk目录,下载ndk后是一个自解压程序,会释放ndk的目录。

然后需要设置环境变量或者在react-native根目录下新建local.properties文件,文件内容如下:

sdk.dir=c:\你的sdk目录

ndk.dir=c:\你的ndk目录

设置要之后就可以编译了,导入和编译的过程比较曲折,请继续看下文。

在编译AwesomeProject项目时,没有用到ndk,实际上这里的ndk默认情况下并没有用到,只是gradle的设置里有ndk因此必须配置ndk才能导入项目。

ndk是在编译核心库是才用到,核心库位于react-native/ReactAndroid,导入整个项目时以lib形式存在。查看Examples目录下UIExplorer,会发现在build.gradle是以在线的方式导入核心库的。通过源码的方式导入被注释掉了。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

// compile project(':ReactAndroid')

}

由此可知,编译UIExplorer并不需要ndk,如果你不想设置ndk,有2个办法

1.拷贝AwesomeProject项目中的build.gradle,settings.gradle到UIExplorer的android目录,在导入项目时选择UIExplorer/android就可以了,这样androidStudio会导入单个项目,否则会导入整个项目。

2.用androidStudio新建一个同名的项目,然后把UIExplorer目录中的文件拷贝到新建的项目中。

编译好之后启动服务器端,到react-native目录下执行:

npm install

node packager\packager.js

windows下如果出现错误需要根据错误提示修改代码http://www.cnblogs.com/zhaojietec/p/4853273.html

不过需要注意的是,目前为止,UIExplorer在Android下有一个bug,IOS下没有问题,通过google可以找到了解决办法。https://github.com/facebook/react-native/issues/2855

原因是,js代码和android原生代码不同步,通过build.gradle可以看到android下的引用的reactNative核心库为11,而js代码版本已经更新到12了。

解决的办法有2个,一个是使用git工具(如smartGit),将js代码恢复到之前的版本,另一个办法是重新编译reactNative的核心库,编译核心库需要ndk,在mac下没有问题,在windows编译会出错。编译reactNative核心库,对UIExplorer下注释掉的依赖项进行修改即可,编译速度较慢 需要在线下载第三方依赖库。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Native//compile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

compile project(':ReactAndroid')

}

由于windows下无法编译,所以这里提供编译好的aar文件,修改UIExplorer build.gradle中的依赖项就可以了。至于如何引入aar文件,可以自行搜索。当然mac下同样也可以用这个aar,可以省去不少麻烦。

阅读全文

与reactnative电商源码相关的资料

热点内容
单片机led单灯一分钟闪烁 浏览:363
long数据类型java 浏览:71
eclipsejava64下载 浏览:965
服务器如何转发消息的 浏览:885
云南程序员好不好 浏览:204
三菱m70编程软件 浏览:913
丁字梁加密吗 浏览:329
BG编程啥意思 浏览:656
云服务器难玩吗 浏览:274
如何ping云端服务器 浏览:148
文件夹中能不能存放设备文件 浏览:3
继电器连接单片机 浏览:14
宁明天西到崇左源码 浏览:657
10g文件夹误删能恢复吗 浏览:132
dos命令服务启动 浏览:724
aws云服务器付费 浏览:171
水滴杆文件夹图片 浏览:26
java百战程序员25讲 浏览:383
java斑马 浏览:998
名片开发源码 浏览:333