2018-02-03 16:24:37 guduyishuai 阅读数 2245
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

前面介绍了react native的expo方式开发,非常快捷方便。

react-native 环境搭建(上)

react-native 环境搭建(下)

但是如果我们还需要原生代码,或者开发完毕后,需要真机调试,光是上面的内容是不能实现的。

为了实现以上内容,我们需要依赖sdk,我们可以通过android studio的sdk manager来下载我们想要的sdk。

下面来详细说明一下怎么搭建react native和原生的混合项目

一、react-native

之前我们安装的是create-react-native-app,现在我们要安装另一个东西

npm install -g react-native-cli
       二、SDK依赖

 目前我们项目的react native版本为0.52.2

 依赖的sdk platforms为android 6.0(marshmallow)

 其中需要包含如下

 

   SDK Tools为23.0.1

    

配置好环境变量ANDROID_HOME

三、创建工程

react-native init 项目名

创建成功日志如下


创建完成后,连接设备,用adb查看设备是否连接


如果连接正常,在项目根目录下运行react-native run-android命令

如果出现如下错误

      

      原因可能有很多种,毕竟这个错误信息比较笼统。我这里说一下我遇到的情况。另外先说明一下,这个错误只是

安装apk时出错,apk已经打包好了,我们可以将apk包用adb进行安装


 好了,现在来说一下我遇到的情况。由于我的设备的版本是android5.0,对于android5.x的系统react-native

确实存在这个问题。解决办法为,修改build.gradle和gradle-wrapper.properties文件,将相应的版本进行降级



再次调用react-native run-android命令,就不会有之前的错误了


如果这个时候,启动app报错如下


表明找不到启动所需的入口,解决办法如下

在src\main下建立assets文件夹

调用如下命令

React-native bundle --platform Android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
 
 这个时候,assets文件夹下会多出两个文件


最后,需要检查项目路径下是否有index.android.js文件。我创建的项目中没有该文件。需要拷贝index.js文件,将

文件名改为index.android.js。


2017-04-05 16:08:04 jasonxin8 阅读数 340
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

在RN 25版本之前,旧版本的React是从react-native 中import的,

如果升级完依赖之后,直接运行项目之后会得到一个报错信息:

Seems you’re trying to access ‘ReactNative.Component’ from the ‘react-native’ pakeage.
Perhaps you meant to access ‘React.Component’ from the ‘React’ package instead?
For example, instead of :

import React, { Component, View } from ‘react-native’;
you should now:

import React, { Component } from ‘react’;
import { View } from ‘react-native’;
…..

修改js格式如下:

    import React, {
        Component,
    } from 'react';

    import {
        AppRegistry,
        StyleSheet,
        Image,
        View,
    }  from 'react-native';
2017-10-31 20:57:50 qq_36091581 阅读数 1617
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

react-native APP Image加载图片
*react-native APP Image加载图片共有3中方法:
1.加载外部资源的图片(网络图片)

 <Image style={{width:100,height:100}} source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} />

2. 加载本项目图片
2.1 android
在android/app/src/main/res/drawable目录中加入你需要的图片。

<Image style={{width:100,height:100}} source={{uri:'icon'}} />

记住uri对应的图片名称是不包含后缀的。需要重新打包APP,这样图片能够被正确加载并且显示出来。
2.2 ios
——————自己百度,啦啦啦—————————————————
2.3 android和ios均适用
这里写图片描述
在源文件的根目录新建文件夹app,具体看上图。
images.js中写法
这里写图片描述
在pages中的引用:

import LocalImg from '../images'
<Image style={styles.logoimg} 
  source={LocalImg['logo']}
/>

完成了。
3.加载SD卡内的图片
如果要加载手机存储卡上的图片资源,其方式也很简单,假设我现在要加载sdcard根目录下的icon.png。对应的代码如下:

 <Image style={{width:100,height:100}} source={{uri:'file:///sdcard/icon.png'}} />

可以看到使用了file://加上文件的路径/sdcard/icon.png进行加载,当然你还需要加入对应的权限。这样图片就能正确加载了。

2016-09-25 13:12:09 zhangbuzhangbu 阅读数 3374
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

调试React-Native有两种场景,第一种是通过react-native run-ios(或者run-android)启动应用,第二种是打开已经安装在手机的Debug版本。

1)通过react-native run-ios(或者run-android)启动应用后,要调试应用就比较简单,在配置过Js Server的ip和port后,当应用上显示已经成功时,即可通过编辑js源文件,然后保存。再次刷新应用界面即可进行调试

2)如果不想再次通过react-native run-ios(或者run-android)启动调试过程,可以在打开安装好的Debug版本之前,通过Atom的Nuclide工具启动Js Server。然后就可以直接通过修改js文件调试


2018-01-26 13:57:13 weixin_39063831 阅读数 968
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    480 人正在学习 去看看 钱兴岗

react-native run-android 的时候  前一天还可以打包 都一切正常  今天早上开电脑发现一直报错

01:46:55 E/ddms: 'C:\Users\Administrator\AppData\Local\Android\sdk\platform-tool
s\adb.exe,start-server' failed -- run manually if necessary
                                                                               :
app:installDebug FAILEDnstallDebug


FAILURE: Build failed with an exception.


* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Could not create ADB Bridge.
ADB location: C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools\ad
b.exe


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.


BUILD FAILED


Total time: 12.469 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

不知道是什么原因 去查百度也没查到  因为我是真机调试  和模拟器路径那个也不一样  更换了adb文件 也还是不行  到底是什么原因呢  求大神解答 急急急


这个问题已经解决了  感谢我们后台小哥哥   原来是因为手机上的360手机助手把 5037的端口给占用了  打开任务管理器   把占用5037端口的进程杀死  然后我还把360手机助手给卸载了 手机上的哟   然后打包就成功了   

给大家几个链接去看看   

http://blog.csdn.net/lianxue1986/article/details/51811386

https://jingyan.baidu.com/article/3aed632e24d3c5701180916d.html

以上是端口被占用的时候报错的解决办法   如果端口没占用的话   我有个链接 大家可以看看 但我没有尝试 因为我的就是被占用并且已经解决了  http://blog.csdn.net/xishuluoye/article/details/17880663   

没有更多推荐了,返回首页