安卓轮播图正常加载,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]; } }
10 -
今朝
2021-03-03
你的react native是什么版本
012021-03-04 -
今朝
2021-03-03
没看出来你的代码有什么问题,重新使用Image组件也没用了,这个就很奇怪了,你试过重新执行yarn start启动服务过吗
00 -
小资要奋斗
提问者
2021-03-03
Image在ios上好像任何地方都渲染不了了,是设置问题吗?
00 -
今朝
2021-03-03
看一下你的代码
012021-03-03
相似问题