用React Native做一个填字游戏（2）——渐变色背景

游戏的背景是一层渐变色，如果使用图片来实现要P图，而且图片是要占的空间的，对APP来说静态资源越少越好，可以有效减少APP的体积。这里可以使用React Native官方提供的react-native-linear-gradient插件来实现背景渐变色。

安装步骤

在工程的根目录下安装插件
npm install react-native-linear-gradient --save
安装完成后将插件链接到工程中
react-native link
然后就能在代码里使用这个插件了

使用插件

在上一篇文章里的页面代码做点修改，将最外层的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>

这样仅用了三行代码就实现了一个渐变色背景，够简单的吧

填坑记

执行react-native link后，在模拟器里刷新界面是会出错的，这时需要在命令行里执行react-native run-android来重新编译程序，把新加入的包也编译进来才能继续运行。
如果重新编译后还是出现红屏错误，就试下把node_modules文件夹删掉，执行npm install来安装所有包，然后在执行react-native run-andorid重新运行