前言
之前利用自己的業餘時間入門了微信小程序，並寫了一個入門項目 我的第一個微信小程序-趣聞 ，整體效果和之前寫的 kotlin-android 版的 趣聞 模塊和功能上沒有什麼區別。不得不說，相比較 Android ，小程序開發起來真的是很舒服，完善的 API和封裝全面的組件，安裝官方詳細的開發文檔，很快就可以開發出一款簡單便捷的應用。
我們都知道，微信小程序的開發運用的大部分是前端的知識，那 react-native 開發同樣如此，既然這樣就順帶學習一下 RN，也爲後面的跨平臺開發做下鋪墊。其實 RN 從 15 年到現在發展的也是蠻成熟的，也有了自己完善的控件，活躍的社區也開源了很多美觀的組件、項目和 API，因此開發起來也是相當的順手，當然也避免不了很多的坑，後面會進行介紹。
項目預覽
IOS：
Android：
掃描體驗：
或者點我
整體功能跟之前小程序和 Android 項目的大差不差，主要包括四大模塊：新聞、段子、歷史上的今天和小愛同學（圖靈機器人）。後面會對每個模塊進行大致的介紹。
新聞模塊
功能： 查看多種類型的實時新聞，其中包括：頭條、社會、國內、國際、娛樂、體育、軍事、科技、財經和時尚。並支持點擊單個新聞查看新聞詳情。
段子模塊
功能：查看最新的段子數據，支持下拉刷新和上拉加載更多查看往期的段子數據。
歷史上的今天模塊
功能：查看歷史上今天發生的事件，並支持點擊查看事件的詳情。
小愛模塊
功能：和機器人進行簡單的對話聊天。
項目知識點
這個項目屬於入門難度，所以我整個學習到開發差不多5天的時間。開發過程中會遇到一些難點或者坑，這裏記錄下來，方便自己後面查看，或許也可以幫助到小夥伴。
一些稍微簡單的，比如配置環境，創建項目的我就不多說了，自己百度就可以直接查到，後文也會附上相關的鏈接。
開源組件
RN 原生也提供了很多的組件和接口 官網入口，社區也開源了很多開源組件，這裏對那些無私奉獻的開發者表示感謝。
我這個項目不復雜，因此用到的框架並不多，後續如果我再添加新的功能可能就需要添加相對應的框架了。
下面是我用到的組件：
react 和 react-native 創建項目的時候就下載了。
native-base 比起原生的控件，樣式上好看很多，並且提過了其他的控件，比如 Card、 Head等。
react-native-swiper 有點類似 Android 的 ViewPager實現輪播效果。
react-navigation 官方推薦的跳轉，並且附帶了 tab 組件。
具體的使用我就不多做介紹了，進入具體的官網，都會有非常詳細的使用教程。
自定義組件
看上面的預覽圖，你會發現第一次請求網絡或者下拉刷新&上拉的時候，會出現一個 Loading 這個就是簡單的自定義組件，我接下來簡單介紹另一個自定義組件：當請求失敗，展示失敗頁面，並可以點擊重試按鈕進行重試。因爲要把點擊重試的事件回調給使用者調用，涉及到 props 的概念，很有代表性，也很常用，所以就介紹他吧。
先看一下效果。
界面搭建： 這個不難。
定義自定義屬性：
static propTypes = {
retryClick: PropTypes.func.isRequired
};
聲明屬性的類型，PropTypes.func 代表這個屬性是函數， isRequired 代表這個屬性必須添加
屬性調用： 在點擊重試時調用這個屬性，我這裏是函數，所以直接執行該函數。
onPress={() => {
if (this.props.retryClick != null) {
this.props.retryClick()
}
}}
自定義控件使用：
this.state.netErrorVisible ? (
<NetworkFailureLayout retryClick={() => {
this.getData()
}}/>
) : null
這裏通過 netErrorVisible 字段控制網絡請求是否成功。
佈局
用到最多的就是 flex 佈局，涉及到前端的知識不做介紹，本人也是前端小白。推薦學習鏈接。
快速實現圓角+陰影效果
shadowColor: '#ccc',
shadowOffset: {width: 2, height: 2,},
shadowOpacity: 0.5,
shadowRadius: 10,
backgroundColor: Color.white,
borderWidth: 0,
borderRadius: 5,
borderColor: 'rgba(0,0,0,0.1)',
padding: Size.public_margin,
elevation: 3,
overflow: 'hidden',
調試
模擬器 cmd + M & 真機搖晃手機調起調試菜單。常用功能：
Reload 重新加載
Debug JS Remotely
調試應用，會打開本地 http://localhost:8081/debugger-ui 調試界面，最好使用 Chrome
Enable Live Reload 實時預覽，cmd + s 有文件變化便重新編譯。
Android 打包
首先在項目根目錄使用終端執行 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 命令，會生成 index.android.bundle（這個文件很重要）和相關的資源文件到 android/app 的相關目錄下。
其次就是正常的 Android 打包流程了。這裏貼出教程鏈接： Android 打包
總結
整體開發起來，從 環境配置-創建項目-學習相關知識-開發-運行-調試-打包這一套流程走下來，還是蠻順利的，可能因爲項目比較簡單的原因吧，當然也遇到了不少的坑，這裏做個總結。
學習來源
- 中文官網 (不用多少，很詳細，全面)
- 某寶買的視頻(有需要私聊)
- 鏈接網站(文末會貼)
數據來源
聚合數據 沒辦法，暫時沒有能力寫接口，每天每個接口有 500 次的請求限制。
採坑心得
unable to connect with remote debugger Timeout while connecting to remote debugger
- 檢查是否連接設備 & 有且僅有一臺設備
- 手機調試模式是否打開
- 調試服務是否打開
- 將存在的
apk卸載重新運行 - 檢查端口是否被佔用
-
使用
createStackNavigator創建bottomBartitleBar白色在
createStackNavigator配置出添加headerMode: 'none',隱藏titleBar，然後使用native-base中的Head創建TitleBar。 -
FlatList列表使用navigation進行跳轉，navigation not definedFlatList屬於自定義組件，如果需要使用navigation跳轉，需要將navigation對象傳到每個item。 -
運行失敗
![]()
經常會遇到這種錯誤，仔細排查日誌詳情，一般是可以找到問題的。
![]()
這裏是因爲
Text導了兩個包。
相關鏈接
項目已上傳至 Github： Qnews_React_Native
本人也是小白，寫的也不是很全面，請見諒。