瞭解如何使用react native編寫自己的android應用程式

想學習如何編寫Android應用程式嗎？React Native是最簡單的方法之一，可以使用節點.js在你的電腦上。...

React Native允許您使用JavaScript和React構建本機移動應用程序，React是Facebook構建的用戶界面庫。它使得編寫Android和iOS設備的代碼變得簡單，而不必精通java（Android）和C++ +目標C（iOS）。

以下是您需要知道的一切，以便與React Native一起啟動和運行。

反應本機先決條件

如果您已經熟悉React，那麼就不需要開始使用React Native了。您需要一個internet連接，並且您需要能夠通過網絡連接到您的計算機。您可能還希望閱讀我們關於Linux命令行基礎知識或初學者Windows命令行的指南。

安裝react native

安裝React Native再簡單不過了，但您需要安裝節點.js第一。

我們已經討論了節點.js早在2013年，但簡而言之，它允許您使用JavaScript編寫“合適的”桌面和服務器應用程序。

去醫院節點.js下載頁面，然後選擇Windows或macOS安裝程序。Linux版本也可以使用，但是您需要做更多的工作才能安裝這些版本。

下載後，運行安裝程序，接受許可協議，然後安裝。你不僅得到節點.js，但您也會得到npm，它是一個JavaScript包管理器。有了它，您可以安裝其他軟件包——比如React Native！

開始使用React Native最簡單的方法是使用create React Native app命令行程序。打開一個新的終端或控制檯，並使用npm安裝它：

npm install -g create-react-native-app

如果在安裝create react native app時遇到問題，則可能需要修復npm權限。

一旦安裝，你就可以開始創建你的應用了。

創建應用程序的簡單方法

現在您已經安裝了create react native app，您可以創建第一個app。創建一個新文件夾來存儲項目，並在命令行中導航到它。

使用create react native app實用程序創建應用程序。此命令將創建名為FirstAndroidApp的應用程序：

create-react-native-app FirstAndroidApp

React Native基於項目名稱（FirstAndroidApp）為您創建了一個新文件夾。導航到此文件夾，然後運行：

npm start

這將啟動開發服務器。

您將看到許多重新啟動服務器的選項，以及QR碼和服務器IP地址。你們都準備好用**跑步了。

在設備上運行應用程序

要在Android設備上測試你的應用程序，你需要安裝一個名為Expo的應用程序。這將連接到您的計算機，並加載您的應用程序。您所做的任何更改都將重新加載應用程序。它的工作非常好，是一個很好的方式來開發你的應用程序。

一旦你安裝了Expo，確保你的**和你的電腦在同一個網絡上。它不能在不同的網絡上或防火牆後工作。

打開Expo應用程序，選擇“掃描二維碼”。將**攝像頭對準命令行中的二維碼，幾秒鐘後，你的應用程序就會出現在**上。回到命令行，您將看到幾個新的狀態。這些信息告訴您應用程序已經完成構建，並且正在您的設備上運行。

我們開始寫代碼吧！

你好，世界！

在FirstAndroidApp文件夾中，React Native創建了多個文件。有一個node\u modules文件夾，用於存儲您可以安裝以支持應用程序的節點包。打開應用程序.js在您最喜愛的文本編輯器中。

這個文件包含24行代碼。有幾個導入、一個名為App的類和一個樣式表：

import React from 'react';import { StyleSheet, Text, View } from 'react-native';export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); }}c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});

這看起來可能很複雜，但是一旦您熟悉了React本機語法，就很容易了。很多語法與HTML和CSS相似。

讓我們深入瞭解一下代碼。這些導入確保您的應用程序能夠訪問所需的React本地組件，該組件需要工作：

import React from 'react';import { StyleSheet, Text, View } from 'react-native';

大括號（{StyleSheet，Text，View}）指定要導入的多個文件。

你必須有這個類應用程序。內部返回是**將顯示的代碼。這個標記類似於HTML，但由自定義的React本地標記組成。

視圖標記是存儲其他容器的位置。風格={樣式.容器}屬性將此視圖配置為使用文件底部的樣式表。

視圖標記中有多個文本標記。必須在文本標記中放置文本。如果不這樣做，React Native將無法工作。

底部是定義為常量的styles對象。這與CSS非常相似，只是它有更多面向對象的外觀。但是，您需要使用React本機特定語法。

讓我們修改這個代碼。讓我們改變周圍的顏色，以及文字。

在CSS中，將backgroundColor更改為綠色（或任何您喜歡的顏色）：

backgroundColor: '#4caf50',

注意十六進制代碼必須在單引號中。讓我們改進一下課文。創建一個名為text的新樣式。添加顏色、字體大小和字體權重屬性：

text: { color: '#fff', fontSize: 34, fontWeight: 'bold'}

將此添加到容器元素下面，用逗號分隔：

c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#4caf50', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', fontSize: 34, fontWeight: 'bold', }});

最後，在App類中更改文本：

<Text style={styles.text}>Hello, World!</Text>

通過設置style屬性，可以告訴React Native根據先前在文本樣式中定義的樣式設置文本樣式。