[英]Top & Bottom black borders are surrounding the react native app in iPhone 11 simulator
我是 react-native 的新手。 我嘗試使用 react-native 聲音播放器為動物構建聲音播放器。 我可以成功啟動 Android 應用程序而沒有任何設計問題。 但由於設計問題,我無法完成 iOS 應用程序。
這是應用程序的啟動畫面。 大的黑色頂部和底部邊框覆蓋了應用程序。 我想刪除這些黑色邊框。
下面是應用程序的 App.js 文件,
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>
);
}
}
這是 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,
},
});
仍然無法弄清楚這個設計問題的問題。
你有什么主意嗎?
您在 splace 屏幕中的視圖渲染項目我已更改安全區域視圖設計從樣式表中刪除兩個屬性
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>
);
}
}
另外,更改您的圖像樣式表bg
bg: {
flex: 1
width: ComponentStyles.WIDTH,
height: ComponentStyles.HEIGHT,
}
這對我有用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.