iPhone 11 模拟器中的 React Native 应用程序周围有顶部和底部黑色边框

Question

I am new to react-native. I tried to build a sound player for animals using a react-native sound player. I could successfully launch the Android App without any design issues. But I couldn't complete the iOS app due to a design issue.

This is the splash screen of the app. Big black top and bottom borders are covering the application. I want to remove these black borders.

Below is the App.js file of the application,

import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

import SplashScreen from './src/screens/SplashScreen';
import HomeScreen from './src/screens/HomeScreen';
import AnimalCategory from './src/screens/AnimalCategory';
import Animal from './src/screens/Animals';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const Stack = createStackNavigator();

export default class App extends Component {
  render() {
    return (
      <SafeAreaProvider>
        <NavigationContainer independent={true}>
          <Stack.Navigator
            initialRouteName="SplashScreen"
            component={SplashScreen}
            screenOptions={{headerShown: false}}>
            <Stack.Screen
              name="SplashScreen"
              component={SplashScreen}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="HomeScreen"
              component={HomeScreen}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="AnimalCategory"
              component={AnimalCategory}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Animal"
              component={Animal}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    );
  }
}

And this is the SplashScreen.js,

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, PermissionsAndroid} from 'react-native';
import ComponentStyles from '../../constant/Component.styles';
import {BG, CL} from '../../assets/images/index';
import {SafeAreaView} from 'react-native-safe-area-context';

export default class SplashScreen extends Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    setTimeout(() => {
      this.props.navigation.replace('AnimalCategory');
    }, 2000);
  }

  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <Image source={BG} style={styles.bg} resizeMode="cover" />
        <Text style={styles.text}>{'Powered By'}</Text>
        <Image source={CL} style={styles.logo} resizeMode="contain" />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  bg: {
    position: 'absolute',
    width: ComponentStyles.WIDTH,
    height: ComponentStyles.HEIGHT,
  },
  logo: {
    position: 'absolute',
    width: ComponentStyles.WIDTH * 1,
    height: ComponentStyles.HEIGHT * 0.1,
    borderRadius: ComponentStyles.HEIGHT * 0.4,
    bottom: 2,
    alignSelf: 'center',
  },
  text: {
    position: 'absolute',
    fontSize: ComponentStyles.WIDTH * 0.05,
    fontFamily: 'berkshireswash-regular',
    bottom: 65,
    alignSelf: 'center',
    color: ComponentStyles.COLORS.BLACK,
  },
});

Still couldn't figure out the issue for this design issue.

Do you have any idea?

Answer 1

Your view render item in splace screen I have changed safearea view design remove two properties from stylesheet

render() {
  return (
    <SafeAreaView
    contentContainerStyle={{
        flex: 1,
      }}>
      <Image source={BG} style={styles.bg} resizeMode="cover" />
      <Text style={styles.text}>{'Powered By'}</Text>
      <Image source={CL} style={styles.logo} resizeMode="contain" />
    </SafeAreaView>
  );
 }
}

Also, change your image stylesheet bg

bg: {
  flex: 1
  width: ComponentStyles.WIDTH,
  height: ComponentStyles.HEIGHT,
}

This is work for me I used style sheet of image like above code it works for me fine, hope this work for you