javascript - iPhone 11 模拟器中的 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,
}
这对我有用
推荐阅读
- microsoft-graph-api - 是否可以使用 Graph API 在 OneDrive 的目录中搜索文件
- spring-boot - 从 FilterChain 返回后 HTTP 请求正文的内容发生变化
- swift - 在 TableView 中设置样式内容而不会导致滚动滞后
- java - 测试包含模拟 JPA 存储库的服务时出现 NullPointerException
- apache-kafka - Avro 与 Cloudevent 与 AsyncAPI 的区别 最适合 kafka 中的模式演变和命名约定
- odata - 用于平面结构的 UI5 OData
- python - 在视图 django 中通过 url 传递参数时找不到页面错误
- html5-canvas - html5 填充样式不起作用。无论我将它传递给什么值,它都显示为黑色。我做错了什么?
- flutter - 在颤振中使用“可拖动”时如何设置反馈和指针之间的偏移量?
- devops - AWS 中是否有任何服务可以为 AWS 中的 Ms SQL 服务器数据库执行 CI 流程