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

CrosswordPuzzle

游戏的背景是一层渐变色，如果使用图片来实现要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';


  
    { grids }
  
  
    {
      selectedGrid && 
    }
  
  

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

填坑记

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