0%

Android React Native入门

本文需要了解基本Android开发知识

环境

  1. JDK
  2. Node
  3. Watchman 可选 Windows问题比较多,不推荐安装
  4. Android SDK配置环境

配置

  1. 项目结构,创建相应文件

    ├── android
    ├── index.js
    ├── node_modules
    ├── package.json

  2. 编辑package.json文件添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {
    "name": "[项目名]",
    "version": "0.0.1",
    "private": true,
    "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
    },
    "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.1",
    "react-navigation": "1.5.2"
    },
    "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
    },
    "jest": {
    "preset": "react-native"
    }
    }

    也可以使用命令创建官方的HelloWorld项目,然后拷贝相关配置文件,如下:

    1
    2
    npm install -g create-react-native-app
    create-react-native-app AwesomeProject
  3. 安装nodejs库,在根目录中执行命令:

    1
    2
    npm install
    npm install -g react-native-cli
  4. 编辑index.js文件添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View
    } from 'react-native';

    export default class Launch extends Component {
    render() {
    return (
    <View style={styles.container}>
    <Text style={styles.welcome}>
    Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
    To get started, edit index.js
    </Text>
    <Text style={styles.instructions}>
    Double tap R on your keyboard to reload,{'\n'}
    Shake or press menu button for dev menu
    </Text>
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    },
    });

    AppRegistry.registerComponent('ReactTest', () => Launch);
  5. android目录中创建app工程项目,然后在项目中集成React Native

    • [可选] 在settings.gradle文件中添加:

      1
      rootProject.name = '[项目名]'
    • gradle.properties文件中添加:

      1
      android.useDeprecatedNdk=true
    • 在根目录build.gradle文件中添加:

      1
      2
      3
      4
      5
      6
      7
      allprojects {
      repositories {
      maven {
      url "$rootDir/../node_modules/react-native/android"
      }
      }
      }
    • 在app目录build.gradle文件中添加:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      apply from: "../../node_modules/react-native/react.gradle"
      android {
      defaultConfig {
      ndk {
      abiFilters "armeabi-v7a", "x86"
      }
      }
      splits {
      abi {
      reset()
      enable false
      universalApk false // If true, also generate a universal APK
      include "armeabi-v7a", "x86"
      }
      }
      }
      dependencies {
      compile "com.facebook.react:react-native:+"
      }
    • 在app项目中创建MApplication.java

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
        public class MApplication extends Application implements ReactApplication{

      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this){

      @Override
      public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
      }

      @Override
      protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(new MainReactPackage());
      }

      @Override
      protected String getJSMainModuleName() {
      return "index";
      }
      };

      @Override
      public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
      }
      }
    • 在app项目中创建MainActivity.java

      1
      2
      3
      4
      5
      6
      7
      8
      public class MainActivity extends ReactActivity {

      @Nullable
      @Override
      protected String getMainComponentName() {
      return "ReactTest";//与index.js中registerComponent对应
      }
      }
    • 修改app项目中AndroidManifest.xml文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <application
      android:name=".MApplication">
      <activity android:name=".MainActivity">
      <intent-filter>
      <action android:name="android.intent.action.MAIN" />

      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      </application>

运行

  1. 通过命令行直接运行开发服务和app:

    1
    react-native run-android

    如果使用Windows系统请使用方法1,方法2会在运行app时出现异常:java.io.IOException: Could not delete path

  2. 通过命令运行开发服务,然后手动运行app

    1
    2
    npm start
    #也可使用: react-native start

    开发服务正常启动后如下,使用中不能关闭(如果安装Watchman,开发服务会在后台运行可以关闭当前窗口):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    \> [email protected] start x:\xxxx\React
    \> node node_modules/react-native/local-cli/cli.js start

    Scanning 564 folders for symlinks in x:\xxxx\React\node_modules (43ms)
    ┌──────────────────────────────────────────────────────────────────────────── ┐
    │ Running packager on port 8081. │
    │ │
    │ Keep this packager running while developing on any JS projects. Feel │
    │ free to close this tab and run your own packager instance if you │
    │ prefer. │
    │ │
    │ https://github.com/facebook/react-native │
    │ │
    └────────────────────────────────────────────────────────────────────────────┘
    Looking for JS files in
    X:\xxxx\React

    React packager ready.

    Loading dependency graph, done.

提示

Demo:ReactTest