react-native-swiper 实现绑定接口动态获取轮播图路径 图片不显示的原因

问题描述：

后端提供了如下面示例的图片路径：

fileUrl： https://xxxx.xxxxxx.com.cn/api/partyApp/banner/showImage?fileId=95cc2b1557644161adb92022fef75dde // 是二进制，非.png也非base64的图片 

后端提供的接口数据数组中，图片资源的字段是fileUrl，直接在浏览器上可访问，但是放到react-native的Image组件，就不起效了，整个swiper组件一片空白，为什么？（接口数据取到了，但是图片资源路径无法在程序中的Image组件显示，但是直接浏览器粘贴地址可以看到图片）

问题分析： 

原因是，我们的后端设置了token验证，需要在图片资源source的uri字符串末尾加上&auth.token=${Zqmb.businessToken} // 这边变量自行替换

处理前的代码：

{bannerList.map((banner, index) => {
              return (
                // <ImageWrapper icon={'\uf652'} size={26} color="#666" />
                <Image
                  key={index}
                  style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
                  source={{ uri: banner.fileUrl }}
                  style={styles.img}
                />
              );
            })}

处理后的代码： 

{bannerList.map((banner, index) => {
              return (
                // <ImageWrapper icon={'\uf652'} size={26} color="#666" />
                <Image
                  key={index}
                  style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
                  source={{ uri: `${banner.fileUrl}&auth.token=${Zqmb.businessToken}` }}
                  style={styles.img}
                />
              );
            })}

完整代码： 

{bannerList.length ? (
          <Swiper
            loop={true} //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
            autoplay={true} //自动轮播
            autoplayTimeout={1} //每隔4秒切换
            horizontal={true} //水平方向，为false可设置为竖直方向
            // paginationStyle={{ bottom: 0 }} //小圆点的位置：距离底部10px
            showsButtons={false} //为false时不显示控制按钮
            showsPagination={true} //为false不显示下方圆点
            // top={NAVBAR_HEIGHT}
            dot={
              <View
                style={{
                  //未选中的圆点样式
                  backgroundColor: OAColor.swiperDot,
                  width: OASize(5),
                  height: OASize(5),
                  borderRadius: OASize(2.5),
                  marginHorizontal: OASize(5)
                }}
              />
            }
            activeDot={
              <View
                style={{
                  //选中的圆点样式
                  backgroundColor: OAColor.activeDot,
                  width: OASize(5),
                  height: OASize(5),
                  borderRadius: OASize(2.5),
                  marginHorizontal: OASize(5)
                }}
              />
            }
          >
            {bannerList.map((banner, index) => {
              return (
                // <ImageWrapper icon={'\uf652'} size={26} color="#666" />
                <Image
                  key={index}
                  style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
                  source={{ uri: `${banner.fileUrl}&auth.token=${Zqmb.businessToken}` }}
                  style={styles.img}
                />
              );
            })}
          </Swiper>
        ) : null}