CrosswordPuzzle

游戲的背景是一層漸變色，如果使用圖片來(lái)實(shí)現(xiàn)要P圖，而且圖片是要占的空間的，對(duì)APP來(lái)說(shuō)靜態(tài)資源越少越好，可以有效減少APP的體積。這里可以使用React Native官方提供的react-native-linear-gradient插件來(lái)實(shí)現(xiàn)背景漸變色。

安裝步驟

在工程的根目錄下安裝插件
npm install react-native-linear-gradient --save
安裝完成后將插件鏈接到工程中
react-native link
然后就能在代碼里使用這個(gè)插件了

使用插件

在上一篇文章里的頁(yè)面代碼做點(diǎn)修改，將最外層的View改為使用LinearGradient，其余代碼不用修改

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient style={styles.container} colors={['#006e7c', '#57c7d1', '#8fd9d2', '#eebfa1']}>
  <View style={styles.board}>
    { grids }
  </View>
  <View style={[styles.note]}>
    {
      selectedGrid && <Note
        horizontalNote={selectedGrid.horizontalNote}
        verticalNote={selectedGrid.verticalNote}
        horizonActive={selectState.horizontal}
      />
    }
  </View>
  <BottomLayout
    style={styles.bottomLayout}
    handleInput={this._handleInput}
    onHintClick={this._onHintClick}
  />
</LinearGradient>

這樣僅用了三行代碼就實(shí)現(xiàn)了一個(gè)漸變色背景，夠簡(jiǎn)單的吧

填坑記

執(zhí)行react-native link后，在模擬器里刷新界面是會(huì)出錯(cuò)的，這時(shí)需要在命令行里執(zhí)行react-native run-android來(lái)重新編譯程序，把新加入的包也編譯進(jìn)來(lái)才能繼續(xù)運(yùn)行。
如果重新編譯后還是出現(xiàn)紅屏錯(cuò)誤，就試下把node_modules文件夾刪掉，執(zhí)行npm install來(lái)安裝所有包，然后在執(zhí)行react-native run-andorid重新運(yùn)行