原创 《React-Native系列》29、 RN組件之WebView
說起WebView，我們還是很熟悉的吧。特別是做過Hybrid開發的同學，Web+Native一個很經典的開發模式，包括現在依然很多App上都在使用。我們列舉幾個比較重要的屬性吧source {uri: string, method: s
2020-06-19 14:02:14
1
原创 《React-Native系列》10、 RN組件之Text和TextInput以及注意要點
今天把寫的RN程序從iOS上遷移到Android上，發現了一些問題，主要涉及到Text和TextInput這兩個組件，所以用一節來專門記錄下來。 Text組件 我們先來看官網給的例子： renderText: function() {
2020-06-19 12:59:33
2
原创 《React-Native系列》22、 Flux框架Demo詳解
今天我們來結合一個簡單的Demo來講解Flux框架，讓大家瞭解Flux框架的真面目。 先上一張比較漂亮的圖（對漂亮的圖，總是沒有抵抗力:-) ）。 我們再來回顧下Flux框架的四大組成部分 View： 視圖層Action（動作）：視
2020-02-22 09:18:19
原创 《React-Native系列》12、 API模塊之PixelRatio和Dimensions
PixelRatio和Dimensions 是ReactNative提供的API，這個在我們編寫RN頁面的時候必須要使用的。 PixelRatio 我們還是先看看官網怎麼介紹的。 PixelRatio類提供了訪問設備的像素密度的方法。 根
2020-02-22 09:18:19
5
原创 《React-Native系列》13、 組件封裝之Dialog（iOS和Android通用）
最近在項目中封裝了個Dialog組件，iOS和Android平臺上通用。 組件Dialog顯示時，從頁面頂部滑動到中間，點擊確認或取消後，從頁面底部劃出頁面，需要注意動畫的實現。 源碼如下： 'use strict'; import
2020-02-22 09:18:19
2
原创 《React-Native系列》15、 RN之可觸摸組件
今天，我們來看下ReactNative提供的可觸摸組件。 分別爲:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。
2020-02-22 09:18:19
原创 《React-Native系列》26、 ReactNative實現圖片上傳功能
在查看ReactNative的官方文檔的時候，你會發現其實Fackbook是沒有提供圖片上傳功能的。如果我們的項目裏需要使用圖片上傳（用JS 實現圖片上傳），那我們有沒有什麼辦法呢？通過搜索react-native的github， 會發現
2020-02-22 09:18:19
原创 《React-Native系列》18、 RN之定時器Timer
在web開發中，我們通常需要使用定時器功能，使用setTimeout和setInterval函數。 那麼在ReactNative中，是否也提供了定時器的功能呢？ 答案是肯定的。 我們還是先看看官網怎麼說的。 定時器是一個應用中非常重要的
2020-02-22 09:18:19
原创 《React-Native系列》16、 RN組件之ListView
今天來談談ReactNative提供的ListView組件，ListView是我們最常用的組件。 還是先來看看官網怎麼說的。 ListView - 一個核心組件，用於高效地顯示一個可以垂直滾動的變化的數據列表。最基本的使用方式就是創建一個
2020-02-22 09:18:19
原创 《React-Native系列》23、 js實現下拉刷新效果（Android和iOS通用）
這幾天項目裏有這麼個需求：一個列表頁需要支持下拉刷新和上拉刷新。 其中上拉刷新效果已經實現，具體思路見：《React-Native系列》19、 ListView組件之上拉刷新（iOS和Android通用） 今天我們重點來說說下拉刷新的實
2020-02-22 09:18:19
原创 《React-Native系列》11、 圖解RN佈局之FlexBox，三分鐘上手寫RN界面
前面其實已經寫過很多RN界面了，今天再來回顧下FlexBox佈局，主要是記錄筆記，必備日後查閱。 綜述 flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。採用flex佈局的元素，稱爲flex容器（
2020-02-22 09:18:19
原创 《React-Native系列》27、 Redux的異步數據流
我們再前面講的 redux 中的數據流都是同步的，流程如下：view -> actionCreator -> action -> reducer ->
2020-02-22 09:18:19
原创 《React-Native系列》21、 解決RN在Android下不支持gif問題
由於RN在Android平臺上不支持gif格式的圖片，今天介紹下我們是怎麼處理這個問題的。 先來看看我們需要實現的效果，這是一張gif圖片，當我們列表上拉加載下一頁的時候需要使用這個效果，如下圖： 我們的解決方案是：將gif切成15張
2020-02-22 09:18:19
1
原创 《React-Native系列》17、 RN中this所引起的undefined is not an object錯誤
在我們編寫RN代碼的時候經常會出現一個錯誤，undefined is not an object(evaluating 'this.refs' ). undefined is not an object錯誤，提示我們未知的對象，該句話的含
2020-02-22 09:18:19
原创 《React-Native系列》19、 ListView組件之上拉刷新（iOS和Android通用）
ReactNative提供了RefreshControl下拉刷新組件，但是沒有提供上拉刷新組件，上拉刷新在App中是很常用的。今天我們來實現一個iOS和Android通用的上拉刷新功能。下面簡要介紹下我實現的思路。如果你對ListView
2020-02-22 09:18:19