React Native: как заставить View внутри ImageBackground иметь ширину 100%, но с горизонтальным отступом?

Question

В моем приложении React Native есть следующий экран:

Черно-синий фон ImageBackground, а зеленая полоса посередине - View. Код:

<ImageBackground
  source={require('@images/login-background.jpg')}
  style={{
    flex: 1,
    width: '100%',
    resizeMode: 'cover',
    justifyContent: 'center',
  }}
>
  <View style={{
    width: '100%',
    backgroundColor: 'green',
    borderRadius: 15,
    padding: 15
  }}/>
  </ImageBackground>

Я хочу, чтобы на левом и правом краях зеленого цвета View было 15px отступов. Если бы ImageBackground было View, я бы добавил 15px отступа к нему, но когда это ImageBackground, это приводит к:

И наоборот, если я добавлю margin: 15px к зеленому View, я получу это:

Как мне подойти это, чтобы это выглядело так?

Answer 1

Вы можете выполнить вышеуказанное требование, используя Dimensions в React-Native

import React from "react";
import { ImageBackground, View, Dimensions } from "react-native";

const screenWidth = Dimensions.get('window').width;

export default App = () => (
    <ImageBackground
        source={{ uri: "https://reactjs.org/logo-og.png" }}
        style={{
            flex: 1,
            width: '100%',
            resizeMode: 'cover',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
        <View style={{
            width: screenWidth - 30,
            backgroundColor: 'green',
            borderRadius: 15,
            padding: 15
        }} />
    </ImageBackground>
);

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

Попробуйте это:

    <ImageBackground
      source={image}
      style={{
        flex: 1,
        width: '100%',
        resizeMode: 'cover',
        justifyContent: 'center',
      }}
    >
    <View style={{paddingHorizontal: 15}}>
      <View style={{
       width: '100%',
       backgroundColor: 'green',
       borderRadius: 15,
       padding: 15,
      }}/>
    </View>
    </ImageBackground>