天天看點

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檔案中做如下修改:

好了,整合就說完了,請大家持續關注哦,現在出項目實戰了