安卓轮播图正常加载,ios轮播图无法加载

来源:9-5 轮播图 下

小资要奋斗

2021-03-03

图片描述

无错误无提醒

{
  "name": "ximalaya",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/material-top-tabs": "^5.3.14",
    "@react-navigation/native": "^5.9.2",
    "@react-navigation/stack": "^5.14.3",
    "@types/react-redux": "^7.1.16",
    "babel-plugin-module-resolver": "4.0.0",
    "dva-core-ts": "^2.0.7",
    "dva-loading-ts": "^3.0.23",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-config": "^0.12.0",
    "react-native-gesture-handler": "^1.10.1",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.17.1",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.1.0",
    "react-native-tab-view": "^2.15.2",
    "react-redux": "^7.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@types/react-native-snap-carousel": "^3.8.2",
    
    "@react-native-community/eslint-config": "^0.0.7",
    "@types/jest": "^24.0.24",
    "@types/react-native": "^0.61.15",
    "@types/react-test-renderer": "16.9.1",
    "@typescript-eslint/eslint-plugin": "^2.12.0",  
    "@typescript-eslint/parser": "^2.12.0",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "prettier": "^1.19.1",
    "react-native-iconfont-cli": "^2.2.1",
    "react-test-renderer": "16.9.0",
    "typescript": "^3.7.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

import {hp, viewportWidth, wp} from '@/utils/index';
import React from 'react';
import {Image, StyleSheet, View} from 'react-native';
import SnapCarousel, {
  AdditionalParallaxProps,
  Pagination,
  ParallaxImage,
} from 'react-native-snap-carousel';

const data = [
  'http://bulu-operation.oss-cn-beijing.aliyuncs.com/image-2021-03-02-17%3A58%3A17-1614679097317-929269.png',
  'https://statis.buluvip.com/student-2021-03-02-22%3A41%3A57-1614696117191-702413.png',]
  

const sliderWidth = viewportWidth;
const slideWidth = wp(90);
const slideHeight = hp(26);
const itemWidth = slideWidth + wp(2) * 2;

class Carousel extends React.Component {
  state = {
    activeSlide: 0,
  };
  onSnapToItem = (index: number) => {
    this.setState({  
      activeSlide: index,
    });
  };
  renderItem = (
    {item}: {item: string},
    parallaxProps?: AdditionalParallaxProps,
  ) => {
    return (
      <ParallaxImage
        source={{uri: item}}
        style={styles.image}
        containerStyle={styles.imageContainer}
        showSpinner
        spinnerColor="rgba(0,0,0,0.25)"
        {...parallaxProps}
      />
      // <Image
      //   source={{uri: item}}
      //   style={styles.image}
        
      // />
    );
  };

  get pagination() {
    const {activeSlide} = this.state;
    return (
      <View style={styles.paginationWrapper}>
        <Pagination 
        containerStyle={styles.paginationContainer}
        dotContainerStyle={styles.dotContainer}
        dotStyle={styles.dot}
        activeDotIndex={activeSlide} 
        dotsLength={data.length}
        inactiveDotScale={0.8}
        />
      </View>
    );
  }
  render() {
    return (
      <View>
        <SnapCarousel
          layout={'default'}
          data={data}
          renderItem={this.renderItem}
          sliderWidth={sliderWidth}
          
          itemWidth={itemWidth}
          hasParallaxImages
          loop
          autoplay
          onSnapToItem={this.onSnapToItem}
        />
        {this.pagination}
      </View>
    );
  }
} 

const styles = StyleSheet.create({
  imageContainer: { 
    width: itemWidth,
    height: slideHeight,
    borderRadius: 8,
  },
  image: {
    // ...StyleSheet.absoluteFillObject,
    // resizeMode:'cover'
    width: 100,
    height: 100,
  },
  paginationWrapper:{
    justifyContent:'center',
    alignItems:'center'
  },
  paginationContainer:{
   position:'absolute',
   top:-20,
   backgroundColor:'rgba(0,0,0,0.35)',
   paddingHorizontal:3,
   paddingVertical:4,
   borderRadius:8
  },
  dotContainer:{
    marginHorizontal:6,
  },
  dot:{
    width:6,
    height:6, 
    borderRadius:3,
    backgroundColor:'rgba(255,255,255,0.35)'
  }
});

export default Carousel;

开始的时候imag能出现图片,切换到ParallaxImage 就无法出现了。再使用image组件也没有显示了。请问大神们这是什么问题

写回答

5回答

小资要奋斗

提问者

2021-03-03

参考cdn https://blog.csdn.net/TanHao8/article/details/108789511  修改

修改node_modules中react-native/Libraries/Image/RCTUIImageViewAnimated.m文件268~275行

添加

{
if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
}else{    //加上这个  不然ios14以上的系统看不见图片
[super displayLayer:layer];
}
}


1
0

今朝

2021-03-03

你的react native是什么版本

0
1
小资要奋斗
"react-native": "0.61.5", 可能其他组件版本太高了,不过使用这个方法解决确实有效
2021-03-04
共1条回复

今朝

2021-03-03

没看出来你的代码有什么问题,重新使用Image组件也没用了,这个就很奇怪了,你试过重新执行yarn start启动服务过吗

0
0

小资要奋斗

提问者

2021-03-03

Image在ios上好像任何地方都渲染不了了,是设置问题吗?

0
0

今朝

2021-03-03

看一下你的代码

0
1
小资要奋斗
已更新
2021-03-03
共1条回复

跨平台应用ReactNative+TypeScript仿喜马拉雅开发App

从入门到实战,掌握用TypeScript开发ReactNative应用

832 学习 · 339 问题

查看课程