學習筆記：RN之組件、庫、開源項目學習

一、常用組件匯總

1.1、View， 基礎視圖組件，相當于iOS的UIView和Android的Activity。
1.2、圖片顯示組件
  • Image，圖片
  • ImageBackground，背景圖片
1.3、事件響應組件
  • TouchableOpacity/TouchableHighlight，后者支持設置高亮顏色。
  • Button，按鈕組件，樣式固定，只支持簡單屬性配置。定制化的需求使用TouchableOpacity來擴展支持。
1.4、文本相關
  • Text，文本顯示組件；
  • TextInput，文本輸入組件
1.5、滾動和列表
  • ScrollView，滾動視圖組件，相當于iOS的UIScrollView。
  • FlatList/SectionList/VirtualizedList，列表，支持惰性渲染子元素。
    相當于iOS中的UITableView，其中VirtualizedList 是 FlatList/SectionList 的底層實現，SectionList 是支持分組的列表。
1.6、Modal，一種簡單的覆蓋在其他視圖之上顯示內容的方式。

類似于iOS的模態視圖的概念，可以用來實現，例如Toast、loading框、彈窗等等。

1.7、其他
  • ActivityIndicator，圓形的 loading 提示符號組件
  • RefreshControl，下拉上拉組件
  • Switch，on/off的開關組件
  • StatusBar，狀態欄組件
  • KeyboardAvoidingView，主要用來解決：手機上彈出的鍵盤常常會擋住當前的視圖。本組件可以自動根據鍵盤的高度，調整自身的 height 或底部的 padding，以避免被遮擋。

二、第三方組件庫

三、頁面的跳轉

React Navigation 包含三種模式，分別是StackNavigator棧導航、TabNavigator標簽導航、DrawerNavigator抽屜導航（從側邊欄劃出抽屜一樣的效果），這基本覆蓋現有移動端的交互場景。
最早選擇使用ReactRouter，現在基本上用 React Navigation 替代，做為頁面跳轉首選。

react-navigation 4.x的使用

四、網絡編程

RN框架提供 Fetch 來實現網絡連接。

五、本地數據持久化

  • AsyncStorage
    以鍵值對的形式進行存儲數據。
    在 iOS 上，AsyncStorage在原生端的實現是把較小值存放在序列化的字典中，而把較大值寫入單獨的文件。在 Android 上，AsyncStorage會嘗試使用RocksDB，或退而選擇 SQLite。
數據庫

六、開源項目學習

常用開學庫

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容