React Native中的背景图片和滚动视图

Question

我正在使用React Native构建一个应用程序，并希望实现一个背景图和一个ScrollView，将其覆盖在背景图上，就像Yahoo天气应用程序一样。

但是我无法让它正常工作。

请帮忙解决。

- genxstylez

Answer 1

为了达到这种效果，您需要设置一个绝对定位的图像，然后将一个ScrollView放置在View的顶部:

为了实现这个效果，你需要设置一张绝对定位的图片，然后在这张图片上方放置一个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, 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."

- Nader Dabit

---

但是现在，我需要这个应用程序能够水平滑动，以便下一页具有与第一页相似的布局。有什么想法吗？ - genxstylez

使用React Native 0.18.1，该示例中的一些样式属性甚至不需要。这是一个剥离了一些属性的示例：https://gist.github.com/alexbepple/ded4d0f0798ad0165c44 它还展示了更多文本，以说明在大屏幕设备上的滚动和浅色背景图像。 - Alex