react-native踩坑之行（一）

小太陽本尊發表於2018-06-10
原文網址 : https://juejin.im/post/5b1ccf69e51d4506c7668da8
React

1.android textinput placeholder 多行文字垂直居中顯示，而ios左上對齊。

新增屬性：textAlignVertical='top'（在這裡吐槽一下百度，搜了一百篇文章沒一篇管用的，還是google大法好）
複製程式碼

2.textinput android和ios樣式不一致 ios完美 Android出現下劃線等

新增style ： padding ：0
新增屬性 ： underlineColorAndroid = 'transparent'
（官方文件給出的解決方案 所以 看文件還是得仔細）
複製程式碼

3.textInput ios鍵盤坑

   新增屬性 ： keyboardType = { 'numeric' } 千萬注意字串外部有大括號才好使～～簡直神坑
複製程式碼

4:android預設滑動樣式的變化

理由：對於react-navigation來說，iOS的預設樣式是左右滑動，但是Android這個深坑是上下滑動，
    當切換的navigation-header顏色由淺色切換到深色時，會在切換前出現黑色陰影～
網上搜了超多程式碼，解決方法很一致，可惜沒找到所需要的原始碼。無奈，只能自己看原始碼寫了。
複製程式碼

react-native踩坑之行（一）

首先引入原始碼的檔案。接下來就是根據原始碼修改成我們需要的滑動方式，我把Android的修改成和ios一樣的，有其他需要的同學們可以自行根據原始碼修改滑動樣式。
複製程式碼

react-native踩坑之行（一）

程式碼不易～且行且珍惜～
複製程式碼

5 ： 傳參和引數回傳

傳參對於navigation特別好傳，跳轉時帶引數，下一個頁面在生命週期函式裡面直接獲取引數即可。這幾天在網上發現一個大哥寫的很好的一個方法，借來分享一下。
    https://blog.csdn.net/yqxllwy/article/details/78221700
。。連結在此，請自行翻閱。這個方法只能返回靜態資料，感覺很好，變換的資料還是通過navigation傳吧～其次是引數回傳，callback真的很好用～
程式碼格式：

app.js 		 
    navigate('one',{
        callback  : (backdata) => {  ...  }
    })
    
one.js 		
    const {state,goBack,navigate} = this.props.navigation
    state.params.callback('回傳引數')；
goBack();

這樣app就會重新渲染資料了。
複製程式碼

最近還在跳其他坑～後續分享～

相關文章