贴在顶部的图像背景 React Native

Question

我想实现以下视图，其中我有一个蓝色图像作为背景添加到容器顶部。关于如何在 React Native 中实现这一点有什么想法吗？ P.S。我也在项目中使用 Native Base

Answer 1

    import * as React from 'react';
    import { View, Image, Dimensions } from 'react-native';
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;
    export default function App() {
      return (
        <View
          style={{
            flex: 1,
            backgroundColor: '#ecf0f1',
          }}>
          <Image
            resizeMode={'contain'}
            source={{
              uri:
                'https://loremflickr.com/cache/resized/65535_51113407033_7bed78119e_z_640_360_nofilter.jpg',
            }}
            style={{ width: windowWidth, height: 300, position: 'absolute' }}
          />
          <View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 10 }}>
            <View
              style={{
                width: windowWidth * 0.8,
                height: 350,
                backgroundColor: 'white',
                alignSelf: 'center',
              }}
            />
          </View>
        </View>
      );
    }