用reactnative开发安卓app_reactnative app开发 - CSDN
  • React Native开发android应用

    千次阅读 2016-07-20 17:28:46
    1、准备工作: ①首先搭建React Native环境,...③react-native run-android这句不需要执行。直接用Android Studio导入项目。 ④开启服务器端:react-native sta

    1、准备工作:

    ①首先搭建React Native环境,http://facebook.github.io/react-native/docs/getting-started.html

    ②用真机运行(我用华为荣耀6)。

    react-native run-android这句不需要执行。直接用Android Studio导入项目。

    ④开启服务器端:react-native start

    ⑤运行Android Studio中的该项目,会出现红屏。解决红屏需要:调出Dev Setting(华为荣耀6是摇晃手机调出Dev Setting),设置Debug的服务器地址与端口号。

    2、开发前说明

    ①React Native遵循ES6规范。

    ES6是对JavaScript的改进,但目前并不支持所有浏览器,所以在Web开发方面并不是很常用。React Native搭载ES6支持,所以完全不需要担心兼容性问题,请随意使用ES6元素importfromclassextends, 和语法 () =>

    如果不熟悉ES6,也没关系。语法看多了就会懂,或者点这个连接大致浏览一下this page

    ②React Native支持JSX语言

    开发时除了会看到import,from等之外,还会有<Text>Hello World</Text>,这就是JSX语言。

    3、开发Hello World

    修改入口文件index.android.js:

    import React, { Component } from 'react';
    import { AppRegistry, Text } from 'react-native';
    
    class HelloWorldApp extends Component {
      render() {
        return (
          <Text>Hello world!</Text>
        );
      }
    }
    
    AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
    运行android项目,即可看到Hello World!字样。

    4、理解Hello World程序

    ①为什么入口文件是index.android.js文件。

    通过项目中的AndroidManifest.xml得知主Activit为MainActivity,而MainActivity继承自ReactActivity:

    public class MainActivity extends ReactActivity {

    ReactActivity的onCreate方法调用了getReactNativeHost().getReactInstanceManager()方法:

    mReactRootView.startReactApplication(
          getReactNativeHost().getReactInstanceManager(),//-----调用ReactNativeHost.java中的createReactInstanceManager()方法。
          getMainComponentName(),
          getLaunchOptions());
    setContentView(mReactRootView);//---------------------将mReactRootView设置为布局。

    getReactInstanceManager()方法调用了ReactNativeHost.java中的createReactInstanceManager()方法:

      public ReactInstanceManager getReactInstanceManager() {
        if (mReactInstanceManager == null) {
          mReactInstanceManager = createReactInstanceManager();
        }
        return mReactInstanceManager;
      }
    
    ---------
      protected ReactInstanceManager createReactInstanceManager() {
        ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
          .setApplication(mApplication)
          .setJSMainModuleName(getJSMainModuleName())
          .setUseDeveloperSupport(getUseDeveloperSupport())
          .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);
    
        for (ReactPackage reactPackage : getPackages()) {
          builder.addPackage(reactPackage);
        }
    
        String jsBundleFile = getJSBundleFile();
        if (jsBundleFile != null) {
          builder.setJSBundleFile(jsBundleFile);
        } else {
          builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
        }
    
        return builder.build();
      }

    其中,setJSMainModuleName()方法就是配置入口JS的地方:

      /**
       * Returns the name of the main module. Determines the URL used to fetch the JS bundle
       * from the packager server. It is only used when dev support is enabled.
       * This is the first file to be executed once the {@link ReactInstanceManager} is created.
       * e.g. "index.android"
       */
      protected String getJSMainModuleName() {
        return "index.android";
      }

    当然,IOS的react-native包中的getJsMainModuleName会指向“index.ios”。


    ②新建类都继承Component类

    如上面HelloWorld代码中HelloWorldApp类,是继承自Component类,Component是react中的一个类。这样的子类可以使用标签形式(<HelloWorldApp>)被调用,可理解为android中的View组件。

    另外每个类,都必须有reader()方法,且内部必须返回一个JSX代码块,以达到像android中View似的视图展示的目的。


    ③AppRegistry注册当前页面,并指示入口类。

    https://github.com/facebook/react-native/blob/master/Libraries/AppRegistry/AppRegistry.js

    1.registerConfig(config:Array<AppConfig>)  static 静态方法, 进行注册配置信息
    
    2.registerComponent(appKey:string,getComponentFunc:ComponentProvider)  static静态方法,进行注册组件
    
    3.registerRunnable(appKey:string,func:Function)  static静态方法 ,进行注册线程
    
    4.registerAppKeys()  static静态方法,进行获取所有组件的keys值
    
    5.runApplication(appKey:string,appParameters:any)  static静态方法, 进行运行应用
    
    6.unmountApplicationComponentAtRootTag()  static静态方法,结束应用





























    展开全文
  • Android开发平台 谷歌在2007年发布Android 是一个开源的基于 Linux 的移动设备操作系统 支持的设备: phone… 语言: 开发语言是java , 后来因为甲骨文准备对android java收费, 又开始向Kotlin转移 IDE: 开发工具...

    Android开发平台

    谷歌在2007年发布Android 是一个开源的基于 Linux 的移动设备操作系统

    支持的设备: phone…

    语言: 开发语言是java , 后来因为甲骨文准备对android java收费, 又开始向Kotlin转移

    IDE: 开发工具以前是eclipse+sdk, 后来谷歌退出了独立的IDE, Android Studio

    打包: 使用签名打包生成.apk文件, 可作为app, 安装在android系统.

     

    可用的平台框架

    现在开发app主要有四种可选方案

    首先是原生, 性能最好, 可是针对不同平台业务代码需要重复开发,

    并且每次发版都需要经过应用市场审核

    所以为了解决这个问题衍生出Cordove+ionic+web的方案,

    cordova Apache的开源框架, PhoneGap演化而来

    提供的是跨平台运行在各种设备的app

    Ionic Web页面提供UI界面和交互.

    然而web版本性能方面有些欠缺.

    所以Facebook推出ReactNative采用virtual DOMnative UI控件进行绑定,

    因此很好待解决了性能问题.

    Flutter使用dart 替换掉JSV8, 性能据说有有更好的提升.

     

    Android 架构

     > Linux内核层

        主要包含硬件相关的驱动, 电源管理, 以及内核本身的文件管理, 线程调度, 权限管理, 内存管理等.

    > 硬件抽象层

        通过抽象封装硬件“驱动”的接口来进一步降低Android系统与硬件的耦合度;

    > 运行库:

        运行时核心库, Dalvik 虚拟机(使各java应用拥有独立的进程)

        C++Sqlite, webkit, media, audio, sslopenGL, freetype

    > JAVA的应用框架: 

        Activity, Windows, View,  notification, package, Telephony, location, resource.

    > APP应用

        短信, 浏览器, 拨号, 计算器, …. 

     

    从Js 层到Java层

    前面说明了android系统从底层到app的整体架构,

    接下来说明一下react-native 实现的android app是怎么交互的.

    画这个图的人把上下颠倒了一下.

    > Java层:

      该层主要提供了AndroidUI渲染器UIManager(将JavaScript映射成Android Widget

     > Android Widget 控件

      Fresco图片加载okhttp 提供http请求,

      对于ios, 或者windows, 这一层都是native层的类似模块.

    > JSEngine

      提供js运行环境

    > JSBridage

      负责上下层的通信.

    > JavaScript层:

       运行的是react native js代码, 包含时间分发, js组件

    Android Studio开发工具

    谷歌提供了统一的夸平台的IDE Android Studio来开发安卓应用, 包含

    1.代码编辑.
    2.布局预览和编辑
    3.性能分析
    4.模拟器
    5.编译/调试
    6.查看和操作android设备上的文件
     

    React Native开发过程中, 这个IDE使用主要是跟模拟器相关的,

     

    Environment环境配置

    环境上, 需要安装react native命令行工具, python2, JDKandroid studio.

    添加环境变量, android studio安装插件和包.

    其中包含sdk, 平台工具, intel硬件加速管理, 模拟器,

    27版的api, 从右图可以看到27对应的是android8.1, 之所以不使用最新的28, 是因为目前还不够稳定.

    x86的系统, 用于模拟器启动android.

    安装好react-native命令行工具,

    就可以创建出工程了.

    工程里包含android的工程, ios的工程,

    依赖的模块, app.js, index.js.

    进入工程目录, 就可以跑起来打包安装了.

    Emulator模拟器

    安装或调试之前需要先配一个模拟器

    或者将一个android设备配置mtp权限通过usb链接电脑.

    ADB(Android Debug Bridge)调试器

    path添加:  AppData\Local\Android\Sdk\platform-tools
    
    查看设备: adb devices
    
    远程: adb shell
    
    安装: adb install xxx.apk
    
    卸载: adb uninstall xxx.apk
    
    下载: adb pull
    
    上传: adb push
    
    日志: adb logcat

     Android 的一个通用命令行工具,

    帮助PC与模拟器实例或连接的 Android 设备进行通信

    首先添加环境变量path添加androidsdk的工具路径

    然后就可以通过命令行控制了

    Adb会在5037端口运行起来一个负责电脑与设备通信的服务.

    AndroidManifest.xml 应用初始化清单

    Android 系统启动应用组件之前,  

    系统通过读取应用的清单, 得知以下信息:

    1. 报名, 版本名, 版本号, 默认安装位置

    2. 硬件功能: 如相机, 蓝牙, GPS.

    3. 用户权限流量, 联系人, 相册, 读写存储等.

    4. 需要链接的API.

    5. 启动状态, 比如横屏, 竖屏, 感应, 键盘等.

    这里面还有很多节点和属性, 这里就不一一例举了.

    link链接

    链接的意思是在android ios 工程中引入对某个native库的导入和依赖.

    如果手动修改需要找到好几个文件一一添加.

    使用命令则可以自动完成这个步骤.

    这样做的目的是, 减少不必要库的加载, 从而缩小打包大小.

    react-native link xxx
    
    android/app/build.gradle
    android/app/src/main/java/com/AppName/MainApplication.java
    android/settings.gradle
    ios/AppName.xcodeproj/project.pbxproj
    

    Touchable可触摸组件

    TouchableHighlight
    TouchableNativeFeedback
    TouchableOpacity
    TouchableWithoutFeedback
    
    onLayout?: (event: LayoutChangeEvent) => void;onLongPress?: (event: GestureResponderEvent) => void;
    onPress?: (event: GestureResponderEvent) => void;onPressIn?: (event: GestureResponderEvent) => void;onPressOut?: (event: GestureResponderEvent) => void;
    pressRetentionOffset?: Insets;
    delayLongPress?: number;
    delayPressIn?: number;
    delayPressOut?: number;
    

    除了button控件, 大部分控件无法响应触摸行为.

    所以需要依赖Touchable系列控件的包裹.

    背景会在用户手指按下时变暗
    在用户按下时形成墨水涟漪
    会在用户手指按下时降低按钮的透明度
    不显示任何视觉反馈
     

    Scroll滚动

    ScrollView
    FlatList
    SectionList
    
    onContentSizeChange?: (w: number, h: number) => void;
    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    onMomentumScrollBegin?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
    

    滑动操作主要是针对可滚动的控件

    ScrollView是基本的

    FlatList针对长列表做了内存优化, 仅针对可现实范围内的部分加载到内存

    SectionList也有同样的优化, 不过SectionList有分组的功能, 每个组都有独立的header和多行内容.

     

    http 请求

    http 请求, 可以使用fetch接口, 或者XMLHttpRequest

    左边是fetch, 右边是XMLHttpRequest,

    还可以使用第三方库.

    fetch("https://mywebsite.com/endpoint/", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        firstParam: "yourValue",
        secondParam: "yourOtherValue"
      })
    }) .then(response => response.json())
        .then(responseJson => {
          return responseJson.movies;
        })
        .catch(error => {
          console.error(error);
        });
    
    var request = new XMLHttpRequest();
    request.onreadystatechange = e => {
      if (request.readyState !== 4) {
        return;
      }
    
      if (request.status === 200) {
        console.log("success", request.responseText);
      } else {
        console.warn("error");
      }
    };
    
    request.open("GET", "https://mywebsite.com/endpoint/");
    request.send();
    

    File文件访问

    \android\app\src\main\AndroidManifest.xml
          <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
          <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    
    import * as RNFS from "react-native-fs"; 
    export let FileOpt = {
      writeDataStr: (dataStr: string | void, pathName: string) => {
        if (dataStr) {
            RNFS.writeFile(
                `${RNFS.DocumentDirectoryPath}/${pathName}`, 
                dataStr,  'utf8'
            ).catch((err)=>{…});
        }
      },
      readDataStr: (pathName: string): Promise<string | void> => {
        return RNFS.readFile(
            `${RNFS.DocumentDirectoryPath}/${pathName}`,  'utf8'
        );
      }
    }
    

    非常奇怪的是RN官方未提供对文件读写的接口.

    所以不得不使用第三方提供的库.

    这是我封装的文件读写操作接口.

    这里需要说明的是, 写单例不能使用class, 因为会导致打包的apk闪退.

    所以这里使用的是普通object的写法.

    另外, android会限制app的权限, 所以需要在前面提到的AndroidManifest.xml中申明读写权限.

    Database数据库

    但是关系型数据库, 都是第三方提供的.

    WatermelonDB

    react-native-sqlite-storage

    官方提供的数据库比较简陋, 只有key-value

     watermelonDB
     react-native-sqlite-storage
    
    import { AsyncStorage } from "react-native“;
     setCacheStr: async (keyName: string, valueStr: string | void | null) => {
            if (keyName && valueStr) {
                    AsyncStorage.setItem(keyName, valueStr)
                    .catch((err)=>{
                        NativeSdk.log("[StorageOpt: setCacheStr] failed:", err);
                    });
            }
     },
     getCacheStr: (keyName: string): Promise<string | null> => {
            return AsyncStorage.getItem(keyName);
     },
    

    Navigation导航

    官方提供的navigator

    包含tab页导航, 以及跨页面的跳转.

    首先是, 定义名字和导航页面的映射.

    然后在根页面层的props中可以获取到navigator对象,

    使用navigator对象就可以做跳转操作了.

    去到一个页面, 然后返回到前一个页面.

    也经过多次跳转, 之后回到最初的页面.

    const TabNavigator = createBottomTabNavigator({
      Collection: {
        screen: PhotosPage,
        path: '/TabsCollection',
        swipeEnabled: true,
        navigationOptions: {
          tabBarLabel: '照片',
          tabBarIcon: ({ tintColor, focused }:any) => ( <Image …/>),
          tabBarOptions: tabBarOptions
        }
      }
    })
    const tabPages = createAppContainer(TabNavigator);
    const AppNavigator = createStackNavigator({
      Home: tabPages,
      Photo: BigPhotoPage,
      Setting: SettingsPage,
      About: AboutPage
    }, {
      initialRouteName: 'Home',
      headerMode: 'none',
    });
    let PageRouterMain = createAppContainer(AppNavigator);
     navigation.push("Photo", {
              name: 'BigPhotoPage',
              photoParams: photoParams,
              photoList: photoList
            })
    
    navigation.goBack()
    

    Photos手机照片

    获取相片就需要区分平台了,

    这里获取相册访问权限, 需要调用PermissionAndroid

    获取相机访问权限, 也是类似.

    获取到权限之后, 调用CameraRoll.getPhotos才不会发生异常.

    在主线程外解码图片

    图片解码有可能会需要超过一帧的时间。在 web 上这是页面掉帧的一大因素,

    因为解码是在主线程中完成的。然而在 React Native 中,

    图片解码则是在另一线程中完成的。不需要改动代码去额外处理。

     if (this.getPlatform() === "android") {
          let granted = null;
            if (access === "read-storage") {
              granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, 
                {'title': '手机存储', 'message': '访问您的手机存储'}
              );
            } else if (access === "camera") {
              granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.CAMERA, 
                {'title': '手机摄像头', 'message': '访问您的手机摄像头'}
              );
            }
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              NativeSdk.log(`requestPermision ${access} granted`); } else {
              NativeSdk.log(`requestPermision ${access} timeout or denied`);
            }
          } 
    }
     CameraRoll.getPhotos({
              first: getNum,
              assetType: 'Photos',
              after: cursor
            }).then((Photos)=>{
              resolve(Photos);
            }).catch(error => {
              reject(error);
            });
    

    需要小心哪些坑?

    1. Promise代码调试时, 大半代码, 无法下断点.
    2. 安装版console.log无输出, 需要额外写文件.
    3. 启动失败, 也许只是需要删除所有打包缓存文件(每个link过的), 重新运行.
    4. 几乎一半的非官方库没有同时兼容ios, android.
    5. CameraRoll获取的照片地址不是实际地址, 没有后缀, 名字还经常会变.
    6. 设备的USB经常需要重复多连几次.
    7. 包含某些库第三方库之后可能导致打包apk失败.
    8. 日志分散在好几个窗口, 发生错误时不得不一个个检查.

     

     

    展开全文
  • React Native 开发APP(一)

    千次阅读 2018-08-08 15:49:54
    一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。 等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react ...
    一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。
    等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react native app)模式开发,也就是利用脚手架生产项目模板。【国内市场对CRNA的介绍不多,我这里先简单的介绍一下CRNA 入门,后续还是讲原生Android/IOS混合这种模式】暂时先不介绍CRNA模式开发,等国内市场成熟再说不迟。

    工具准备:

    1,进入http://nodejs.cnnodejs中文网,下载与自身环境相一致的nodejs安装包

     

    2,安装包下载之后,双击进行安装

    win平台的同学注意,安装过程中要关闭杀毒软件和各种安全工具

    3,安装完成之后,打开命令行工具,检查是否安装成功,执行如下命令:

    $ node -v
    

    该命令执行结果为当前node版本,笔者当前版本为:

    4,检查NPM是否安装成功,

    npm 是Node包管理工具,之后需要使用它来安装其他node程序包

    在在命令行中输入如下命令:

    $ npm -v
    

    该命令执行结果为:

    3.10.10
    
    

    Yarn

    Yarn是Facebook出品的一个依赖包管理工具,起作用和npm一样。但Yarn具有更多好用的特性:

    • Yarn 会缓存它下载的每个包,所以不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有

    • Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。

    • Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

    • 网络适应单个请求失败不会导致安装失败,请求失败时会重试

    安装yarn

    访问Yarn官网,下载响应平台的安装包,进行安装

    使用Yarn

    安装好之后,其他工具会自动使用Yarn进行加速。

    当然安装之前,你可以先检查一下,你自己是否已经安装过Yarn,如果出现下图的模式,说明已经安装过了。

    yarn -v 看一下当前版本

    安装create-react-native-app命令行工具

    create-react-native-app是一个综合创建ReactNative工程,并且不需要配置的工具,它极大的简化了入门开发的流程。具体的内容,大家可以进入其github.com的主页进行浏览

    安装create-react-native-app需要使用npm进行,在任意目录下,输入如下命令,便可以在该目录下创建一个ReactNative工程。

    注意,如果没有安装crna命令行工具的话,直接运行该命令会报这样的错:

    所以我们要先安装命令行工具,也叫脚手架。

    由于npm 服务器在境外,加上网速慢的原因,这个加载起来会很满,大家稍安勿燥。

    如图所示,安装完成,我今天网速好像有点快啊,安装了30s。

    创建ReactNative工程

    ReactNative工程的模板需要通过create-react-native-app工具进行创建。创建方法如下:

    1,通过命令行进入存放ReactNative工程的文件夹。

    2,在该文件夹下执行如下命令:

    $ create-react-native-app myapp
    

    myapp为工程名,可以更换为其他字符,但必须小写

    安装过程需要1-5分钟不等,如想提升安装速度,可以安装yarn,详情见yarn官网

    下面为笔者安装成功截图:

     

    这个过程比较 漫长  是真的漫长啊,我等了有10分种。这个过程你不要怀疑时间,真的是这样的。

    如果在这个过程中,你等的不耐烦,可以先下载我们的必备工具:1.模拟器,这里我推荐夜神模拟器。2.Expo ,这是一个可以直接装在手机上或者模拟器里,用来测试项目用的。

    模拟器都会安装吧,安装好模拟器,我们配置一下参数:

    为了减少我们的内存开销,我们把配置调的低一点。内存大的土豪无所谓!

     

    运行预览工程

    1,工程创建完成之后,便可以启动工程,开始开发和调试。

    启动工程,首先要使用命令行工具进入工程更目录,然后运行如下指令

     

    $ yarn start
    

    工程 启动之后,会生成一个二维码和一个本地链接,通过此此二维码或本地链接,便可预览工程运行效果。

     

     

     

     这就是代表着你的项目已经跑起来了,如何看效果呢?那就看英文字符,提示:想预览你的app加载出来是什么吊样,那么就用expo app的扫码工具扫一扫吧,你就可以看见你的项目运行起来是什么吊样了!

    expo是什么,如何找到expo并安装expo呢?去expo官网 https://expo.io  好多人反应官网上下载expo有问题,并且也有人加我找我要,这里如果你们有问题的话,可以直接访问下面我给出的expo下载链接,直接下载!

     

     

    按 a 打开该项目在android 或 模拟器上开发设备上

    按 q 展示二维码

    按 r 重新加载资源包 

    按R 重新加载资源包,并清楚缓存

    好了,下面我给大家提供一点资料:

    2,启动工程之后,需要在手机端安装Expo App,使用Expo App对所开发的ReactNative App进行预览运行。

    安装ExpoApp的方法如下:

    iOS平台:在AppStore中搜索Expo client,如图

     

    Android平台下,访问此链接:https://download.csdn.net/download/qq_28929589/10591139 下载安装包并安装,安装过程中需要给此App全部权限。

    3,Expo App在手机端安装完成之后,打开ExpoApp,通过其扫描二维码的功能,扫描生成的二维码,便可以在App内预览开发中的App工程

     

    4,新建工程的运行效果为:

    注意:expo上看你开发的app效果有两种途径:1.手机上直接扫码就可以了 2.复制exp://xxxx.xx.xx.xx那个链接,到project上收索该地址,可以看到项目,如图

     

    在IDE中编写代码,查看效果!

    熟话说,工欲善其事,必先利其器,这里我推荐大家用 vs code编辑器敲代码,效果是非常爽的!

     

    找到我们刚才创建的项目,有vs code打开它,并且编写代码!

     在我修改了内容之后,app的内容也发生了变化!

     

     

    用vs code写rn的话,我在推荐大家安装几个插件,安装插件的目的是为了更加高效的开发

     

     


     

     

     好了,到这一步,我们的app就算是跑起来了,如果你耐心的和我学到了这里,那么恭喜你,你很牛逼,因为我第一搞这个的时候,搞了两天,还是一脸蒙蔽!

    后续文章持续更新,敬请期待!

    文章为作者原创,转载请注明出处

    https://www.cnblogs.com/gdsblog/p/8025092.html

    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...

    https://segmentfault.com/a/1190000003915315

     

    基于雨点儿网,分享react-native开发android app的方法。
    这篇博客旨在帮没有任何android或者ios开发经验的开发者体验一把当下热门的react-native。由于我之前也没有native app的开发经验,所以这篇文章中引用了很多我学习过程中碰到的简短有用的资料,方便大家少走些弯路。

    d18f7338-7cf3-11e5-8257-e52dc7088d0b.jpg

    我的开源项目托管在github。项目相关的具体内容,可参考下篇《react-native项目结构介绍》。本文只讨论react-native基本的概念及开发流程。

    react-native介绍

    直接去官网看,不用挂vpn。总而言之,这货就是用写web的方式去写原生应用。布局用css,代码用react的框架。而且不是hybrid app,所以体验很流畅。
    关于更多react 及react-native的知识。可以参考汇总知识以及知乎大牛

    总而言之,如果要给app分类的话:

    1. webapp:移动端的web页面,纯浏览器应用。

    2. native-app:Java或者oc、swift开发的app,用的本地的组件以及布局。

    3. hybrid-app:介于以上两者之间。即有原生的组件,又封装了webview在里面以便渲染web组件。而这方面有很多框架,典型的如ionic。

    而对于react-native,准确的说,应该是属于native app,因为他的渲染完全是本地方式,不靠webview。但是写代码的方式又是web前端。如何做到的呢?参考react原理

    上手react-native

    QUICK START

    如果没有接触过RN(react-native),强烈建议第一件事是去花几十分钟把QUICK START做一遍,遇到不懂的直接照做,不用纠结原因,全当是搭环境。

    对于RN android的环境搭建步骤主要有:

    1. react-native部分:主要是npm安装react-native-cli工具。这个可以创建工程,运行工程,打包工程等。按照官网教程一步一步来就行了。

    2. android部分:主要是android SDK,模拟器(推荐Genymotion,方便。)

    3. 运行: 主要原理是,react-native run-android这条命令会编译并打包一个用来debug的apk,并安装到模拟器或者手机。但是debug版本的apk并不是独立的apk,每次运行需要从pc上加载你所写的js代码,所以pc上同时自动运行了一个server。之所以这样做是为了方便调试。每次你改完代码后,watchman会检查到改动。同时模拟器或者真机上的debug版程序会有调试功能,你可以在模拟器中重新加js载脚本,改动就被拉到了移动端。 至于怎么发布独立apk参考下文。

    react开发理念

    相信做完上面的quick start,你应该已经会自己创建一个RN工程,在模拟器上跑起来了。 如果依旧对react本身的一些概念(如JSX,组件,state)不太了解,可以看下阮一峰的博客

    react-native工程

    工程结构

    react-native init命令可以创建一个RN的工程,初次创建出来结构是这个样子的。

    2015-10-27 2 54 01

    1. node_modulespackage.json。这个就不必多说了,RN工程也是使用npm去管理依赖的。默认的依赖只有react-native一个包,就是RN自己的代码。

    2. android这个目录。这是一个标准的android工程,Facebook并没有施加什么魔法,去改造android工程。最终代码写完后要发布也只需这个android工程就行了。 ios目录也是一样的, 是个Xcode工程。
      那么RN的代码怎么生效的呢?实际上在根目录下执行react-native run-android后,android工程中gradle的依赖关系会去先编译node_modules下RN的代码,并加入自己的工程中。这也就是第一次跑的时候构建比较慢并且需要装NDK的原因。

    3. index.android.jsindex.ios.js这就是RN工程的主入口,你可以按照自己的组织方式,写很多react的组件组合成自己的app。最终所有的代码会根据这个入口文件加载成一个单一的js文件index.android.bundle加入到android工程中。android的工程有js解释器去执行你的代码。这样一个独立的app就诞生了。

    二次开发

    当然不是每个工程都需要自己重头去创建空工程然后一步步加各种依赖,创建每个文件。我们很多时候是想用别人的一个开源项目做二次开发。那么如何导出自己的源码给别人用,以及怎么用别人的模板程序做二次开发?

    上文介绍了android目录的结构,那么我们发布我们的源码时,实际只要这些依赖关系就行了。android只要工程依赖,不要编译过后的东西。RN本身也只要package.json就行了。这样几百M 的工程只要几M别人就可以使用了。这些不需要拷贝的东西可以参考我的ignore文件

    其实这样导出的工程跟react-native init创建的是一样的。只是少了node_modules,同时多了一些android工程的gradle依赖或者js源码。因此使用的时候要先用npm install 安装RN部分的依赖。然后直接react-native run-android就会编译android部分的依赖并在模拟器上跑起来了。

    如何装RN的插件

    从上文可以看出,RN实际有两套构建系统。

    1. npm用来管理RN的插件。

    2. android或者ios自己的构建系统。

    所以装插件比较麻烦。以react-native-icons这个插件举例。除了npm install之外,还需要改gradle文件,并通过改java代码去加载包。明白了原因就行了,麻烦就麻烦点,好在比较好的插件文档都比较详细。

    react-native打包

    原理

    我们的debug程序中,js代码是调试时,不断从server加载到移动端的。但是发布成独立apk时,总不能让app启动的时候远程加载js代码吧。RN的做法是将所有js打成一个bundle文件,作为android的资源,放在assets目录下面。而assets下的文件是会在安装时,随工程一并安装到移动端本地的。这样apk安装好后,RN会负责去加载。

    步骤

    • 将js代码导成资源
      目前android版本需要手动去做。参考issues。相信Facebook后面的版本会马上会发布自动导资源的命令。实际现在也挺简单:当react-native的server启动后。把http://localhost:8081/index.android.bundle?platform=android这个地址的js拷出来即可。

      • cd to the project directory

      • Start the react-native packager if not started

      • Download the bundle to the asset folder: 
        curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

    • 生成签名apk
      参考官网教程。这里不用android studio,纯命令行就可以,官网教程很详细。最后生成的apk在android/app/build/outputs下面。

    • 嫌麻烦可以把以上步骤放在一个shell脚本中。

    示例

    如有什么疑问,可以直接在SF或者github的issue提问。
    关于RN项目的代码组织,以及raindrop-app开发中遇到的具体问题,可参考下篇《react-native项目结构介绍》

    转载于:https://my.oschina.net/u/1266171/blog/2056327

    展开全文
  • 这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境,那么可以尝试一下编写Hello World。 根本你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也...
  • 使用WebStorm 开发React Native Android APP的配置本教程可以帮助你对WebStorm 进行配置,适用于开发React Native app 1:安装 2:环境配置 3:安装插件 4:Enjoy it 安装1:安装nodejs 与NPM 从以下链接下载Nodejs 并...
  • React Native 混合开发(Android篇)

    千次阅读 2019-02-11 11:24:56
    React Native 混合开发-Android篇创建一个React Native 项目1. 通过npm安装react-native的方式添加一个React Native项目2. 通过react-native init来初始化一个React Native项目二、添加React Native所需要的依赖第一...
  • React Native制作仿美团APP总结

    千次阅读 2018-05-05 19:35:13
    最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录。最后做成的效果如下:1、通过React Navigation来...
  • 使用React Native构建App

    2019-04-22 01:56:47
    Linux编程点击右侧关注,免费入门到精通!作者丨whjinhttps://segmentfault.com/a/1190000018853638搭建开发环境安装reac...
  • React NativeAndroid通信交互

    万次阅读 热门讨论 2019-02-28 10:55:57
    欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。... Android App巧妙集成React Native最详教程 React Native 实现热部署、增量热更新 本篇内容同样和React Native 与 原生App有关,可...
  • 用React Native编写跨平台APP

    千次阅读 2016-04-05 01:00:10
    用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时、原生组件渲染的应用程序的框架。它基于React,Facebook的JavaScript的库,为的是构建用户接口,而并不是以浏览器为目标,它是以手机...
  • React Native开发一 webstorm搭建React Native开发环境

    万次阅读 热门讨论 2017-12-20 21:11:45
    1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。...需要的开发环境主要有node.js + react native +
  • Create React Native App 是由 Facebook 与 Expo 联合开发的用于快速创建 React Native 应用的工具。在作者看来,这是一款非常 Awesome 的工具,其背后依托的 Expo 平台也非常不错。很多没有移动端开发经验的 Web ...
  • React Native这两年确实挺火热,本人也无法自拔啊,关于React Native是什么可谷歌,这里主要和大家讨论如何看待React Native使用时优劣分析,总结下一些从AndroidReact Native相关的概念和基础。来吧,互相伤害...
  • 最近在关注React Native(以下简称RN),对于这个融合了js & iOS & Android的新物种,尝试和它近距离接触的过程中,发现与单独调试js或者native比起来,调试RN的过程确实很繁琐,怎么个繁琐法?假设你已经配置好了...
  • React Native开发React Native移植原生Android项目(4)

    千次阅读 多人点赞 2016-04-01 21:22:55
    (一)前言 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及应用运行,调试相关的知识点做了讲解。今天我们来讲一个非常有用的知识点。移植我们已有的原生Android项目到React Native中。...
  • 前端开发是离用户最近的工程领域,需要在开发时间和体验上不断作出选择和权衡, 就像著名的论断 “php是最好的计算机语言"一样, js也能依靠(node, react native)一统天下. 我们都想要一个统一的框架搞定一切. 而...
  • 本文使用开发环境 Android studio 注意最新的React Native支持的最新的SDK为16(android4.1) npm环境,小伙伴们自己安装 nodeJS自己安装,可以参考官方文档安装环境. 创建Android项目(已有项目跳过)...
  • 前言众所周知,react native开发是前几年较火的一个话题,随着各种框架的更新换代,一些技术也会逐渐被掩埋。本篇是楼主在项目中总结出的一些开发经验。主要讲了react native和原生的app之间的通讯与沟通。首先,...
  • Android项目中集成React Native

    千次阅读 2017-02-28 11:47:01
    React Native是非常强大的,但有的时候我们可能并不需要从0开始去开发一个React Native应用,而是需要把它集成到我们现有的Android工程中去,去添加单个的React Native View。本章将主要介绍在原生Android中集成...
1 2 3 4 5 ... 20
收藏数 15,181
精华内容 6,072
关键字:

用reactnative开发安卓app