背景图像和反应本机上的滚动视图
Background image and scrollview on react native
我正在使用 react native 构建一个应用程序,并希望实现一个背景图像和一个滚动视图,它像雅虎天气应用程序一样叠加在背景图像之上。
但我无法让它工作。
请帮忙。
要获得此效果,您需要设置一个绝对定位的图像,然后在视图顶部放置一个滚动视图:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
ScrollView,
Image
} = React;
let width = Dimensions.get('window').width
var SampleApp = React.createClass({
render: function() {
return (
<View style={{ flex:1, backgroundColor: 'transparent' }}>
<View>
<Image style={{ height: width, width: width, position: 'absolute', top:0, left:0 }} source={{ uri: 'http://i01.i.aliimg.com/wsphoto/v0/32297951629_5/5pcs-lot-The-Hollowan-Star-Nicolas-Cage-Stylish-Square-Pillowcase-Cushion-Pillow-Cover.jpg' }} />
</View>
<ScrollView style={{ flex:1 }}>
<View>
<Text>{ipsum}</Text>
</View>
</ScrollView>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 28,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
fontSize: 19,
marginBottom: 5,
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
let ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
相关文章:
- iOS jquery滚动视图插件不会在iframe上滚动y
- 如何在按下next时自动将滚动视图设置为页面顶部
- Div 使用滚动视图插件进行整理
- 禁用滚动视图上的滚动
- 滚动视图和焦点出现问题
- Famo.us:如何以编程方式对滚动视图的位置进行动画处理
- 背景图像和反应本机上的滚动视图
- 钛 - 安卓:滚动视图滚动位置问题
- 钛应用程序在从可滚动视图中删除页面时崩溃
- 制作一个滚动视图,在用户向下滚动时进行更新
- 滚动视图中text区域的滚动文本
- javascript中的滚动视图内容偏移量
- 从滚动视图中删除视图
- 如何在实例化yui3滚动视图后滚动到右下角
- 单击窗体中的项目.我们滚动视图
- 如何最好地在famo.us中创建单个可滚动视图
- famo.我们-如何获得一个回调当一个分页滚动视图转到一个新的页面
- Titanium appcelerator框架:滚动视图内容的大小不能随着设备方向的改变而改变
- Jquery Mobile滚动视图&谷歌地图路线
- Famo.us滚动视图高度