天天看点

React Native和Android整合详解前言 具体实践

android stuidio 2.2稳定版

64位win7操作系统

红米note3双网通普配版

react native 0.39

这一步按照as新建项目向导一步步完成即可,完成后。

在app module下的build.gradle文件的dependencies中添加react native 依赖:compile 

“com.facebook.react:react-native:+”

修改manifest文件:

1

2

3

4

注:compile sdk 和target sdk都是24(网上有文章讲,使用的appcompat-v7支持包版本必须是23.0.1,compile sdk和target sdk也必须是23 。不过最新的也支持的)

如果你出现下面的错误,可以降低版本到23.

5

6

创建并修改package.json文件 

进入android项目的根目录,使用命令:

这个命令会引导你在reactnativewithnativeapp目录下创建一个package.json文件。如图所示: 

React Native和Android整合详解前言 具体实践

接下来我们对package.json文件进行修改,修改部分如下:

修改为:

修改后,我们在项目根目录的命令行窗口中输入命令:

就相当于执行如下命令:

随着package.json文件的创建,我们的项目也变成了一个node项目。

在项目根目录下输入如下的命令:

执行完后我们发现项目多了一个node_modules文件,react native依赖的库都会在这里看到。

创建.flowconfig文件

在根目录下创建index.android.js文件,如果你是直接用react-native init demo(项目名),也可以拷贝index.android.js,具体代码如下:

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

在项目根目录的build.gradle中(注意:不是app模块中的build.gradle文件)添加依赖。

修改mainactivity内容,完整代码如下:

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

使用npm start命令运行项目,然后使用

如果报错,请往下看。如果出现如下错误:

这个错误的原因是react native提供的libreactnativejni.so文件是32位,而我们的项目中用了一些不兼容的64位so文件,二者混在一起产生的。解决的办法就是禁止使用那些64位的so文件。 

第一,在项目根目录下的gradle.properties文件最后加上这样一句:

第二、在app module下的build.gradle文件中添加如下内容:

第三、找出不兼容的64位so文件并禁止它们 

在目录…\reactnativewithnativeapp\app\build\outputs\apk下找到app-debug.apk,并把它解压,查看一下,解压后的文件的lib目录下有没有这个目录: 

arm64-v8a 

如果有这个目录,看看里面的so文件,都是我们要禁止的,禁止的方法如下:假设里面有一个 1.so文件,我们要在app module下的build.gradle文件中做如下修改:

好了,整合就说完了,请大家持续关注哦,现在出项目实战了