react-native - react-native-swiper 图像不显示
问题描述
我正在使用 react native swiper,无法看到我需要的照片。我是否错误地调用了照片?当我尝试像平常一样使用图像标签显示照片时,它可以正常工作,所以我知道我正在从正确的目录导入照片。
....
import Swiper from 'react-native-swiper';
....
const ProfileCardScreen = ({navigation}) => {
var profilePhotos=[{image:require('../images/NYE.jpg')},{image:require('../images/hiking.jpg')},{image:require('../images/baseball.jpg')}];
return (
<View style = {styles.container}>
<Text style={styles.profilePageUserName}>User Name Here</Text>
<Swiper showsButtons={true}>
<View style={styles.slide1}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={require('../images/NYE.jpg')}/>
</View>
<View style={styles.slide2}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={require('../images/hiking.jpg')}/>
</View>
<View style={styles.slide3}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={require('../images/baseball.jpg')}/>
</View>
</Swiper>
解决方案
语法是正确的,尝试在 import 语句中导入图像,例如
import Swiper from 'react-native-swiper';
import Image1 from '../images/NYE.jpg';
import Image2 from '../images/hiking.jpg';
import Image3 from '../images/baseball.jpg';
....
const ProfileCardScreen = ({navigation}) => {
var profilePhotos=[{image:require('../images/NYE.jpg')},
{image:require('../images/hiking.jpg')},
{image:require('../images/baseball.jpg')}];
return (
<View style = {styles.container}>
<Text style={styles.profilePageUserName}>User Name Here</Text>
<Swiper showsButtons={true}>
<View style={styles.slide1}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={Image1}/>
</View>
<View style={styles.slide2}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={Image2)}/>
</View>
<View style={styles.slide3}>
<Image style={{flex:1, height: undefined, width: undefined}}
resizeMode="contain"
source={Image3}/>
</View>
</Swiper>
如果上面的代码也不起作用,那么您的样式肯定有任何问题。这就是我能做的。
推荐阅读
- java - 从我的 java 应用程序中使用 apiClient 调用 GET Rest 服务。如果我将“&”作为输入参数的一部分。它把它作为分隔符
- android - 以编程方式结合 Textview 和 EditText 创建自定义字段
- javascript - 有没有办法暂停和重新启动网络工作者?
- vba - 在 VBA 的公式中使用变量
- awk - FS 中的插入符号 (^) (gawk)
- python - 将两个项目中的公共文件提取到第三个项目中,保留目录结构
- r - 在闪亮的服务器功能中应用自己的 R 功能
- c# - Firefox 上缺少 ASP.NET 身份 cookie
- html - 注销按钮不清除本地存储
- java - 一个具有多个客户端(应用程序)的 Websocket 服务器