react-native – 背景图像和scrollview on native本机

发布时间：2020-12-15 09:31:57 所属栏目：百科来源：网络整理

导读：我正在使用react native建立一个应用程序,并希望获得背景图像和滚动视图,它覆盖在背景图像之上,如雅虎天气应用程序. 但我无法让它发挥作用. 请帮忙. 解决方法要获得此效果,您需要设置绝对定位的图像,然后将ScrollView放在视图的顶部： 'use strict';var Rea

我正在使用react native建立一个应用程序,并希望获得背景图像和滚动视图,它覆盖在背景图像之上,如雅虎天气应用程序.

但我无法让它发挥作用.

请帮忙.

解决方法

要获得此效果,您需要设置绝对定位的图像,然后将ScrollView放在视图的顶部：

'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,sunt in culpa qui officia deserunt mollit anim id est laborum."

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!