android - React Native Scroll View 不显示图像
问题描述
下面是我的反应原生应用程序代码的代码。但它没有显示图像。我将容器样式从滚动视图移动到图像以不正确的方式显示的图像。
<ScrollView vertical={true} style={styles.container} >
<Image
style={{ width: '100%', height: '100%' }}
source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>
</ScrollView>
这里是容器样式
container: {
flex: 1,
backgroundColor: 'gray',
padding: 10
},
屏幕上没有其他东西可以渲染
解决方案
不要使用flex:1
in ScrollView
,如果不能解决它,请尝试按照其他人的建议设置特定的宽度和高度
<ScrollView vertical={true} style={styles.container} >
<Image
style={{ width: 200, height: 200 }}
source={{ uri: this.props.navigation.state.params.PassedURL }}>
/>
</ScrollView>
容器样式
container: {
backgroundColor: 'gray',
padding: 10
},
编辑:
如果您希望它填充到全宽,只需将宽度设置为 100%,高度将相应调整,并可能根据您的需要放置 resizeMode="contain" 或 "cover"
推荐阅读
- react-native - React Native Expo 41 应用程序在调试 remotejs 启用时崩溃
- laravel - Laravel Sail “构建路径 ./vendor/laravel/sail/runtimes/8.0 要么不存在,要么不可访问,要么不是有效的 URL。”
- reactjs - 在“componentDidMount”方法中使用 state 字段时出现“react/no-unused-state”警告
- c - 在C中输入十六进制到字符串输出
- python - Celery - 任务组和每个组的不同 rate_limit
- javascript - 您可能违反了 Hooks-Error 规则:无效的挂钩调用。Hooks 只能在函数组件的主体内部调用
- javascript - Echarts 在盒须图上显示错误的数据
- c# - 我的下拉列表中没有选项?
- memory-management - 码头服务器最多可以分配多少内存?
- angular - 如果 'student-entries' 是一个 Angular 组件,那么验证它是这个模块的一部分