liaoheng`s blog
0%

Android React Native入门

发表于 更新于

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

环境

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

配置

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

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

  1. 编辑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
  1. 安装nodejs库，在根目录中执行命令：
1
2
npm install
npm install -g react-native-cli
  1. 编辑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);
  1. 在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

  1. 通过命令运行开发服务，然后手动运行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