新的一周

这周随时可能会开始项目，不过我会尽量把所有组件尝试一次。

Image

图片组件，没什么复杂我觉得，只是安卓默认不支持GIF和WEBP格式图片，以及网络图片需要给定尺寸。先尝试网络图片，我用YApi mock了一些图片数据。

720*300就是我mock的数据。

下面做一下安卓上正常播放GIF,文档中给了方法，先尝试一下。

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // 如果你需要支持GIF动图
  implementation 'com.facebook.fresco:animated-gif:1.12.0'

  // 如果你需要支持WebP格式，包括WebP动图
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // 如果只需要支持WebP格式而不需要动图
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

但是增加这些之后安卓上依然不能正确播放GIF，百度一下，原来是RN版本的问题，我现在使用的是0.6+版本，需要更换成以下代码：

    // 如果你需要支持GIF动图
    implementation 'com.facebook.fresco:fresco:2.0.0'
    implementation 'com.facebook.fresco:animated-gif:2.0.0'

然后就可以正常播放GIF图片了。

FlatList

文档给的定位是高性能简单列表组件，这个应该是App中使用频率较高的组件了，我要通过这个组件学会下拉刷新和上拉加载的功能。

首先，先看正常显示数据。先写一个简单刷新和加载的逻辑

        * fetchNews({ payload }, { put, call, select }) {
            yield put({
                type: 'loading/SET_LOADING',
                payload: true
            })

            const News = yield call(fetchNews)//fetchNews是mock地址
            const lastNewsList = yield select(state => state.user.news)
            let res = []
            if (payload.page === 1) {
                res = News
            } else {
                res = [...lastNewsList, ...News]
            }
            yield put({
                type: 'SET_NEWS',
                payload: res
            })

            yield put({
                type: 'loading/SET_LOADING',
                payload: false
            })
        }

好的，同志们经过我不懈的努力，我完成了下拉刷新、上拉加载、字体图标。一样一样来，

下拉刷新功能

 render() {
        return (
            <FlatList
                ItemSeparatorComponent={this._renderSeparator}
                onRefresh={this._onRefreshList}
                refreshing={false}
                onEndReached={this._onEndReachedLoadMore}
                onEndReachedThreshold={0.3}
                data={this.props.news}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        )
    }

下拉刷新必须的两个props分别是onRefresh和refreshing,onRefresh是下拉之后触发执行的方法，refreshing是刷新的标识，给false，如果给了true就会一直（爱的魔力）转圈圈。

onRefresh方法如下

    _onRefreshList = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'user/fetchNews',
            payload: {
                page: 1
            }
        })
    }

上拉加载更多，FlatList代码就是上面的，此功能需要两个必须的props,分别是onEndReachedThreshold和onEndReached,这两个的要求文档中都有，就不赘述了，onEndReached代码如下：

    _onEndReachedLoadMore = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'user/fetchNews',
            payload: {
                page: 2
            }
        })
    }

正常来说page应该是state的变量，应该被记录和修改，但是我就是为了验证上拉加载，偷懒了。

字体图标（这个方法我是百度来的，我只是个搬运工，他写的是rnpm我不是很懂，如果有懂得能否教我一下为什么是rnpm吗？感谢。），字体图标首先需要创建文件夹，一般为./src/assets/fonts,当然这不是一定的，主要看心情。然后在 Iconfont 中创建项目，选择字体图标，下载图标，复制.tff文件放在刚刚创建的文件夹中，如下：

然后修改package.json

  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }

然后执行 react-native link，看到这个之后就可以重启项目了。

使用方法如下：

其中\u是必须写的，后面的四位（e614）是Iconfont的Unicode的后四位,

今天结束了

今天最重大的进步是我会在这里放图片了，恭喜恭喜。明天要完成解决主要问题是安卓弹起软键盘后会引起遮挡UI、输入框的问题。也就是KeyboardAvoidingView这个组件。说白了，还是按照顺序往下做，当我没说。

REACT-NATIVE小白日记（五）

新的一周

Image

FlatList

今天结束了