About layout in React Native-CodePudding

I used two <View>s to lay out this interface, and I rounded the borders of the <View>s in the following section. There is a problem here, the sides of the screen are not filled and there are gaps. How can I deal with this problem?

This is my code:

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar, Image, Alert, TouchableOpacity, Linking } from 'react-native';

export default class App extends Component {
  render() {
    return (
        <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
        <View style={styles.titleBar}>
        </View>
        <View style={styles.bodyContent}>
        </View>
    );
  }
}

//Stylesheets
const styles = StyleSheet.create({
  titleBar: {
    flex: 2,
    backgroundColor: '#E9E9E9',
  },
  bodyContent: {
    flex: 5,
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
});

CodePudding user response：

You can try setting a background color on a parent view, something like this:

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar, Image, Alert, TouchableOpacity, Linking } from 'react-native';

export default class App extends Component {
  render() {
    return (
        <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
        <View style={styles.titleBar}>
        </View>
        <View style={styles.bodyBackground}>
          <View style={styles.bodyContent}>
          </View>
        </View>
    );
  }
}

//Stylesheets
const styles = StyleSheet.create({
  titleBar: {
    flex: 2,
    backgroundColor: '#E9E9E9',
  },
  bodyBackground: {
    flex: 5,
    backgroundColor: '#E9E9E9',
  },
  bodyContent: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
});