ReactNative簡介：

ReactNative是基于React語法來進行開發移動app的框架；

ReactNative中提供了移動端專用的一些組件，我們要使用ReactNative固有的組件代替網頁中使用的一些元素，如：div, p, img 都不能用了；

React Native 組件就是對原生視圖的封裝，因此使用 React Native 編寫的應用外觀、性能等與其他任何原生應用一樣。

開發環境：

無論是什么開發平臺，搭建android環境都需依賴：Node、JDK 和 Android Studio（獲得編譯android的工具和環境）；

搭建ios環境只允許使用macOS作為開發平臺，且依賴：Node、Watchman、Xcode（獲得編譯iOS的工具和環境） 和 CocoaPods；

具體環境配置可閱讀：https://blog.csdn.net/weixin_46758988/article/details/117967747

對項目進行說明：

1.項目根目錄下index.js(入口文件)中AppRegistry.registerComponent可用來設置應用名稱和注冊應用首頁，一般引用app.json中的配置設置應用名。2.App.js為項目的首頁，此文件中引用了其它組件。

創建一個index.js文件：

前面環境配置已經使用react-native-cli啟動了一個項目，并打包成了apk文件，現在將介紹具體開發，這里從一個入口index.js文件開始：

//1.因為是使用腳手架進行搭建的項目，因此直接修改業務代碼即可，引入react如：import React from 'react';//2.在ReactNative中沒有web中的標簽，ReactNative中使用組件代替標簽，這些組件是對原生組件的封裝，使用具體的組件時，需要按需引入，如：import {Text,View,StyleSheet} from 'react-native';//3.使用react語法定義一個組件：class Header extents React.Component{render(){return(<View>{/*view組件類似web中div*/}<Text>hello</Text></View>)}}export default Header;

在設備上運行（調試）：

開發中會經常對應用進行測試，已達到開發要求，因此需要不斷的對其進行測試，要測試就要運行在移動設備或虛擬機上，其方法如：

1.將手機等設備通過數據線連接到電腦上。2.開啟手機USB調試。3.終端運行：adb devices,如果輸入信息有設備，則表示連接成功。4.終端繼續運行：npx react-native run-android 運行應用。（可運行：npx react-native run-android --variant=release安裝release版，但是需要配置簽名）

ReactNative中常用組件：

ReactNative中的組件在使用時應該按需從react-native中導入。

更多組件請閱讀相關文檔：https://www.react-native.cn/docs/components-and-apis
useState狀態：

ReactNative中使用函數聲明組件定義狀態時，使用useState方法，具體使用如：

//1.引入useState方法，使用大括號表示按需引入import React,{useState} from 'react';//2.初始化一個變量的值,可以是任意數據類型，這個值寫在方法括號中,同時第二個參數為一個函數，用來更新設置狀態的值，如：const Person = (props) => {const {personName,setName} = useState('jack')；}

FlatList組件：

const Lists = () => {var lis=[{values: '1'},{values: '2'},{values: '3'}]return (<View><FlatList data={lis} renderItem={({item}) => <Text>{item.values}</Text>}/>{/*renderItem使用{}接收一個函數，函數中傳遞的參數為數據；data使用{}接收數據*/}</View>);}

SectionList組件：

const ListGroups = () => {const liGroup = [{title: 'Group1', data: ['1', '2', '3']},{title: 'Group2', data: ['a', 'b', 'c']},]return (<View><SectionListsections={liGroup}renderItem={({item}) => <Text>{item}</Text>}renderSectionHeader={({section}) => <Text>{section.title}</Text>}keyExtractor={(item, index) => item+'---'+index}/></View>);}

Platform 模塊：

它是一個檢測平臺的模塊，Platform.OS在iOS上返回ios，在安卓或模擬器返回android，因為部分組件是按平臺區分的，不同的平臺不能使用，此時可以借助Platform進行判斷然后針對不同的平臺寫不同的代碼，其用法如：

// 1.引入Platform模塊：import {Platform} from 'react-native';//2.針對不同的平臺寫不同的代碼// 2-1：Platform.OS判斷當前設備是否為ｉＯＳ，返回ｉＯＳ或ａｎｄｒｏｉｄ，如：const isIOS = Platform.OS === 'ios' ? true : false;console.log(isIOS);// 2-2：Platform.select()傳入一個對象，對象的key值定義為ios或android, Platform.select會根據平臺返回ios或android中key對應的值，如：const Devices = Platform.select({ios:'這是ios設備',android:'這是android設備'});//利用它可以做出判斷，在不同的平臺上聲明不同的組件：key后接一個函數或對象聲明組件，它返回的就是key的value值console.log(Devices);// 2-3:Platform.Version用于檢測平臺版本，它返回一個數字或字符串，如：console.log('當前設備的版本號為：'+Platform.Version);// 2-4:Platform.isTV用于檢測平臺是否為TV。

特定平臺擴展名:

當不同平臺代碼較為復雜時，不建議在一個文件夾中書寫不同平臺的代碼，此時應該將android和ios的代碼分不同的文件書寫，ReactNative會根據平臺自動加載.ios.js或.android.js和.native.js(針對web端復用文件)文件;因此,當針對不同平臺需要開發較復雜或大量代碼時，可以分文件存儲代碼,如針對不同平臺的Header組件文件夾名：

Header.ios.jsHeader.android.js//引入并使用Header組件：import Header from './components/Header';<Header/>

定義樣式：

ReactNative中可以通過StyleSheet.create()創建一個樣式對象，里面放一個對象，對象里面是鍵值對方式定義樣式，如：

// 導入styleSheet模塊：import {styleSheet} from 'react-native';// 定義一個樣式對象，const style = styleSheet.create({box:{width:200,height:400},font:{fontSize:20,}})// 使用樣式時，通過style.key即可，如：style.box

React Native 中使用 flexbox 規則來布局可以解決不同尺寸設備布局不一致問題，一般使用flexDirection、alignItems和 justifyContent即可滿足常見的布局要求。

TV端應用：

React Native 應用只需在 JavaScript 端簡單修改甚至無需修改，就能在電視和機頂盒設備運行，其做法為：

//1.在AndroidManifest.xml文件中加入以下配置代碼：<application android:banner="@drawable/tv_banner"> //加入自定義的banner圖作為TV設備上的圖標<intent-filter><category android:name="android.intent.category.LEANBACK_LAUNCHER"/>//當在android上運行時創建它</intent-filter></application>

圖片組件：

<Image source={require('./img/check.png')} /><Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />//網絡圖必須設置寬高：<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}style={{width: 400, height: 400}} />//背景圖：<ImageBackground source={...} style={{width: '100%', height: '100%'}}><Text>hello</Text></ImageBackground>

觸摸事件：

// 1.Button是一個按鈕組件,必須有title屬性和onPress按下事件:<Button title = 'info' onPress={() => {Alert.alert('hello');}}/>

打包apk發布版：

Android 要求所有應用都有簽名才會被允許安裝在用戶手機上，因此在上傳到應用商店前，應先打包一個有簽名的apk,其步驟如下：

1.在javaJDK中bin目錄下打開終端用于鍵入命令生成簽名秘鑰。2.在終端鍵入命令：keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 ，這里使用keytool命令來生成一個秘鑰文件，具體配置項說明：my-release-key.keystore（生成秘鑰文件的文件名，需要保護，特別重要，.前面的名稱可以修改）、my-key-alias（也很重要，需要記住，可以自定義此名稱，應用簽名用）、10000（表示簽名有效時間，這里可以修改），沒有說明的表示配置項的key,這里只是講value做說明。3.鍵入上面命令后回車，此時會彈出一個輸入口令，這里是無法看到的，記住自己輸入的口令后回車（小編鍵入：123as******）4.輸入口令后會填入相關信息，根據實際填寫即可，大概模板如下圖：5.生成的my-release-key.keystore文件在當前bin目錄下。6.將生成的my-release-key.keystore文件復制到項目中android/app下。7.編輯項目中android目錄下gradle.properties文件，對其新增配置后的代碼如（輸入自己生成秘鑰文件時的相關信息）：MYAPP_RELEASE_STORE_FILE=秘鑰文件名MYAPP_RELEASE_KEY_ALIAS=alias的值MYAPP_RELEASE_STORE_PASSWORD=密碼MYAPP_RELEASE_KEY_PASSWORD=密碼8.在項目中android/app/build.gradle文件中配置signingConfigs下debug,value為生成簽名文件時的配置信息，如：storeFile file('my-release-key.keystore')storePassword '生成時的密碼'keyAlias 'my-key-alias'keyPassword '生成時的密碼'9.終端切換到項目的android目錄下，鍵入：./gradlew assembleRelease10.將項目中android\app\build\outputs\apk\release目錄下后綴為apk的文件上傳到各大應用商店即可。

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。