React Native验证码图片设计（验证码图片使用的是同一个链接）

加载验证码图片（所有图片使用的是同一个链接）

Image 可以展示从本地缓存、网络甚至是以'data:'的 base64 uri 形式提供的图片。

问题描述

后端的同一个链接直接返回一张png格式的图片（使用同

一个链接，刷新后获取到的是不同的图片）

一开始我是在Image里面直接使用uri，但这样需要单独再请求一次获取导后端放在headers里面的验证码code，两次获取图片资源是不一样的。这样Image里面展示的

Tips：由于是通过同一个链接获取图片的，pic和headers里面的具体code不能分开取。应该在获取图片的时候就一并获取headers里面的verifyCode

每次请求我的加了一个时间戳参数，用来获取不同的图片

1. 展示图片发起了一个请求

 <Image
    style={styles.picCodeStyle}
    source={{
       uri: `http://159.138.148.219:8090/permission/getKaptcha?time=${this.state.picUrl}`,
    }}
  />
1
2
3
4
5
6

2. 这里保存verifyCode的时候也访问了一次，虽然使用的是一模一样的链接

export const getCodePicRequest = () => {
  return (dispatch: any) => {
    // 获取当前时间戳
    const timestamp = new Date().valueOf();
    request
      .get(`${FETCH_LOGIN_VERIFY_CODE}?time=${timestamp}`)
      .then(res => {
        console.log('xxxxxxyyyyyyyy');
        console.log(JSON.stringify(res, null, 2));
        // 存储当前的时间戳，用于加载不同的验证码图片资源
        //dispatch(actions.setCodePicUrl(timestamp + ''));
        dispatch(actions.setCodePicUrl(res));
        console.log('aaaaaaaassss = ' + res.data);
        console.log(res.headers['hello-code']);
        dispatch(actions.setLoginCode(res.headers['hello-code']));
      })
      .catch(err => {
        Toast.message('图片资源请求失败:', err.message);
        console.log('图片资源请求失败: ', JSON.stringify(err, null, 2));
      });
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解决方法

使用的组件依赖

npm install base64-arraybuffer

GitHub：https://github.com/niklasvh/base64-arraybuffer

npm：https://www.npmjs.com/package/base64-arraybuffer

---

The library encodes and decodes base64 to and from ArrayBuffers

• encode(buffer) - Encodes ArrayBuffer into base64 string
• decode(str) - Decodes base64 string to ArrayBuffer

渲染图片的时候，不使用图片链接地址展示图片

而是在用axios发起异步请求时

1. 将数据转成ArrayBuffer
2. 然后将ArrayBuffer转为base64
3. 在Image中使用以'data:'的 base64 uri 形式提供的图片

<Image
   style={styles.picCodeStyle}
   source={{
     uri: this.props.codePicUrlViewModel,   // 展示的是base64 uri 形式提供的图片
   }}
/>
1
2
3
4
5
6

import {encode} from 'base64-arraybuffer';

// 获取图片验证码
export const getCodePicRequest = (timestamp: any) => {
  return async (dispatch: any) => {
    request
      .get(`${FETCH_LOGIN_VERIFY_CODE}?time=${timestamp}`, {
        responseType: 'arraybuffer',
      })
      .then(res => {
        dispatch(actions.setLoginCode(res.headers['hello-code']));  // 保存图片对应的验证码数据
        const base64Str = 'data:image/jpeg;base64,' + encode(res.data);
        dispatch(actions.setCodePicUrl(base64Str));                 // 保存base64格式的图片资源
      })

      .catch(err => {
        dispatch(actions.setLoginCode(''));
        dispatch(actions.setCodePicUrl(''));
        Toast.message('图片资源请求失败:', err.message);
        console.log('图片资源请求失败: ', JSON.stringify(err, null, 2));
      });
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

'data:image/png;base64,'
'data:image/jpeg;base64,'
1
2