1.先创建一个原生App
通过IDEA创建一个Android工程
2.添加ReactNative依赖
2.1 添加npm依赖
项目根目录
1
2
| npm init
npm i --save react react-native
|
2.2 script增加新命令
1
| "start": "node node_modules/react-native/local-cli/cli.js start"
|
注意：执行下列代码效果相同
3.根目录下创建index.android.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
| 'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
4.环境配置
4.1 app中的build.gradle添加ReactNative依赖
1
2
3
4
| dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
|
4.2 项目根目录中的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:
1
2
3
4
5
6
7
8
9
10
11
| allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
// 这里记得删除..
url "$rootDir/../node_modules/react-native/android"
}
}
...
}
|
4.3 在 AndroidManifest.xml 清单文件中声明网络权限
1
| <uses-permission android:name="android.permission.INTERNET" />
|
4.4 如果需要访问 DevSettingsActivity 界面，也需要在 AndroidManifest.xml 中声明:
1
| <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
|
4.5 添加原生代码
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "myapp3", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
|
