Rect Native小坑

ListView 標(biāo)簽流式布局

contentContainerStyle={styles.listContainer}
listContainer:{
flexDirection:'row',
flexWrap:'wrap',
},

這種方式只能實(shí)現(xiàn)類似標(biāo)簽的高度相等，寬度不同的布局，不能實(shí)現(xiàn)高度不同，寬度相同的瀑布流布局
row的最外層需要設(shè)置確定的高度

ListView 瀑布流

row設(shè)置為絕對(duì)布局，計(jì)算位置

renderRow執(zhí)行的次數(shù)比dataSource的數(shù)量少

如果出現(xiàn)renderRow執(zhí)行的次數(shù)比dataSource的數(shù)量少的情況，
需要設(shè)置:
initialListSize={20} // 可以把值改為dataSource的length
如果不設(shè)置,renderRow只能執(zhí)行前幾條數(shù)據(jù), 想顯示其他數(shù)據(jù), 只能通過改變?nèi)我鈙tate來實(shí)現(xiàn)

得到text的高度

<Text onLayout={(event)=>this._textOnLayout(event)} />

_textOnLayout(event){
    console.log(event.nativeEvent.layout.height,'onLayout');
}

ListView從下向上排列

<ListView contentContainerStyle={styles.listViewContent}/>
listViewContent:{
    flex:1,
    //從下向上排列
    justifyContent:'flex-end'
}

得到組件寬高

this.refs.row.measure(function(ox,oy,width,height,px,py){
    cellHeight=height;
});

<View style={styles.row} ref="row"/>

row:{
    flex:1,
    backgroundColor:'#FFFFFF',
    borderTopWidth:1/2,
    borderBottomWidth:1/2,
    borderColor:'#dddddd',
    marginTop:10/2,
    marginBottom:10/2
},

指定某個(gè)組件

var _listView: ListView;
<ListView ref={(listView)=>{_listView=listView;}}/>

版本更新

openAppStore: ()=> {
  var url = '';
  if (Platform.OS === 'ios') {
    url = 'itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?type=Purple+Software&onlyLatestVersion=true&pageNumber=0&sortOrdering=1&id=1156814163';
  } else {
    url = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.girtu.girtu'
  }

  Linking.openURL(url).catch(err => console.error('An error occurred', err));
},

checkoutUpdate: ()=> {
  let setLaterUpdateTime = (time) => {
    AsyncStorage.setItem('update_time', time);
  }

  let getLaterUpdateTime = () => {
    return AsyncStorage.getItem('update_time')
  }

  // 點(diǎn)擊了稍后更新, 保存當(dāng)前時(shí)間
  let laterUpdate = ()=> {
    setLaterUpdateTime(new Date().toString())
  }

  // 點(diǎn)擊立即下載只是跳轉(zhuǎn)到商店,本地不做處理,如果沒有更新,下次進(jìn)入依然提醒
  // 點(diǎn)擊稍后下載,本地記錄時(shí)間,10天后再次提醒
  let showAlert = ()=> {
    Alert.alert('有新版本發(fā)布, 是否更新', '', [
      {text: '馬上下載', onPress: ()=>module.exports.openAppStore()},
      {text: '稍后更新', onPress: ()=>laterUpdate()}
    ])
  }

  // 計(jì)算時(shí)間差, 如果大于10天就顯示alert, 否則什么都不做
  let calculateDateDiff = (oldDate)=> {
    oldDate = new Date(oldDate)
    let newDate = new Date(); //結(jié)束時(shí)間
    let differDate = newDate.getTime() - oldDate.getTime(); //時(shí)間差的毫秒數(shù)
    let days = Math.floor(differDate / (24 * 3600 * 1000)); ////計(jì)算出相差天數(shù)
    if(days >= 10) {
      showAlert()
    }
  }

  setTimeout(()=> {
    // 假設(shè)獲取到版本號(hào)后
    let newVersion = '2.3.3';
    let oldVersion = DeviceInfo.getVersion();
    if (newVersion > oldVersion) {
      getLaterUpdateTime()
        .then((oldDate)=> {
          // 如果有時(shí)間就計(jì)算時(shí)間差, 沒有時(shí)間就直接顯示
          if (oldDate) {
            calculateDateDiff(oldDate)
            // calculateDateDiff(1489075200000)
          } else {
            showAlert()
          }
        })
        .catch((e)=> {
          showAlert()
        })
    }
  }, 2000)
},

navigationBar顏色漸變

// 參數(shù)格式為#ffffff 或者 #ffffff00
function hexToRGBA(hex) {
  var a = 1
  if (hex.length == 9) {
    a = parseInt(hex.substr(7, 2), 16) / parseInt('ff', 16)
  }

  let r = parseInt(hex.substr(1, 2), 16)
  let g = parseInt(hex.substr(3, 2), 16)
  let b = parseInt(hex.substr(5, 2), 16)

  let rgba = `rgba(${r}, ${g}, $, ${a})`
  return {
    string: rgba,
    r,
    g,
    b,
    a
  }
}

updateProgress(progress, fromIndex, toIndex) {
  var routes = this.props.navState.routeStack
  var fromRoute = routes[fromIndex]
  var toRoute = routes[toIndex]

  let {navColor} = fromRoute

  if (fromRoute.navColor != toRoute.navColor) {
    let fromRGBA = utils.hexToRGBA(fromRoute.navColor)
    let toRGBA = utils.hexToRGBA(toRoute.navColor)
    const {r: toR, g: toG, b: toB, a: toA} = toRGBA
    const {r: fromR, g: fromG, b: fromB, a: fromA} = fromRGBA
    let minusR = toR - fromR
    let minusG = toG - fromG
    let minusB = toB - fromB
    let minusA = toA - fromA

    let r = toR - minusR * (1 - progress)
    let g = toG - minusG * (1 - progress)
    let b = toB - minusB * (1 - progress)
    let a = toA - minusA * (1 - progress)

    navColor = `rgba(${r}, ${g}, $, ${a})`

    this.setState({
      progressStyle: {
        ...this.state.progressStyle,
        backgroundColor: navColor,
      }
    })
  }

  this._nav && this._nav.updateProgress(progress, fromIndex, toIndex)
}

旋轉(zhuǎn)rotate

let iwidth = util.size.width;
let iheight = iwidth / mediaInfo.width * mediaInfo.height

// 如果是旋轉(zhuǎn)過的圖片，重新計(jì)算
let rotate = ??; // 角度 字符串
if (rotate == '90' || rotate == '270') {
   iheight = util.size.width
   iwidth = iheight * (mediaInfo.width / mediaInfo.height)
   let translateXY = (iwidth > iheight ? 1 : -1 ) * (Math.abs(iwidth - iheight) / 2)
   translateXY *= (rotate == '90' ? 1 : -1 )

    return (
        <View style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: iwidth, // 如果90度或者270度，寬高需要反過來，因?yàn)槭窍刃D(zhuǎn)再設(shè)置寬高
            height: iheight,
            transform: [
                {rotate: `${rotate}deg`},
                {translateX: translateXY},
                {translateY: translateXY}
            ]}}
        />
   );
 } else {
    return (
        <View style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: iwidth,
            height: iheight,
            transform: [
                {rotate: `${rotate}deg`},
            ]
            }]}
        />
   )
 }

子view上下拉伸

justifyContent: 'space-between',
alignSelf: 'stretch'

WebView自動(dòng)獲取高度

在html中監(jiān)聽高度的變化，把title設(shè)置為高度，當(dāng)title變化時(shí)，會(huì)觸發(fā)WebView的onNavigationStateChange方法，獲取到高度。

<WebView
    {...this.props}
    source={{html: `<!DOCTYPE html><html><body>${this.props.htmlBody}<script>window.onload=function(){window.location.hash = 1;document.title = document.body.clientHeight;}</script></body></html>`}}
    javaScriptEnabled={true}
    style={[{height: this.state.height}, this.props.style]}
    scrollEnabled={false}
    automaticallyAdjustContentInsets={true}
    contentInset={{top:0,left:0}}
    onNavigationStateChange={(info)=>{
      if (info.title) {
        this.setState({
           height: parseInt(info.title) + 20
         })
       }
     }}
/>

畫三角

// 畫三角。style：
triangle: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderWidth: 8,
    marginTop: -8,
    borderTopColor: 'transparent',//下箭頭顏色
    borderLeftColor: 'transparent',//右箭頭顏色
    borderBottomColor: Colors.BACKGROUND_GRAY,//上箭頭顏色
    borderRightColor: 'transparent'//左箭頭顏色
},

iOS圖片更新不及時(shí)顯示新圖片的解決辦法

bug產(chǎn)生的原因：iOS的Image更換uri不會(huì)馬上清空顯示的內(nèi)容，而是加載成功后才替換，所以在加載過程中依然顯示舊圖片。
解決：

  1. 從Image加載的角度不好解決，所以要讓Image重新創(chuàng)建，就要從ListView下手，而ListView更新已存在的row只是刷新，不是重新創(chuàng)建
  2. react為組件提供了key屬性，用于同級(jí)別的組件根據(jù)key的不同來優(yōu)化渲染，原理就是如果key相同就刷新，key不同就重新創(chuàng)建
  3. 在ListView的renderRow的最外層component添加key屬性，設(shè)置為當(dāng)然數(shù)據(jù)的唯一id，就可以在更新時(shí)重新創(chuàng)建Image，（不可以設(shè)置為row的索引，沒有任何對(duì)優(yōu)化的幫助而且會(huì)造成不可預(yù)料的問題）
  4. 進(jìn)一步優(yōu)化，重新創(chuàng)建item會(huì)造成多余的開銷，而現(xiàn)在只需要更新Image，所以renderRow的component去掉key屬性，給Image添加key屬性，設(shè)置為url，解決。

RN iOS圖片緩存位置

APP路徑/Library/Caches/[Bundle ID]/fsCachedData

引入裝飾器

npm i --save-dev babel-plugin-transform-decorators-legacy
修改.babelrc

{
    "presets": ["react-native"],
    "plugins": ["transform-decorators-legacy"]
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容