如何解决如何在本机反应中删除导航标题填充和边距?
我正在参加世博会并为此来回奔波。我正在尝试清理内容顶部和底部的标题部分。当我在没有导航容器的情况下运行代码时,一切都按设计正常工作,但现在我必须路由新屏幕并绑定到按钮,我无法删除它。我尝试了从主容器样式表将边距设置为 0 并将填充设置为 0 的所有方法。我还使用 Globalstyle 将所有组件推到了具有适当边距的清晰区域。
export default function App() {
const Stack = createStackNavigator();
return (
<NavigationContainer style={GlobalStyles.NotchAware}>
<Stack.Navigator initialRouteName="Home"
>
<Stack.Screen
name="Home"
component={Welcome}
options={{
headerShown:false,}}
/>
</Stack.Navigator>
</NavigationContainer>
) ;
}
对于 app.js 仅使用这种样式
NotchAware: {
flex: 1,paddingTop: Platform.OS === 'android' ? 25 : 0,marginLeft: 5,marginRight: 5,marginBottom: 5,},
这些是一些组件代码和样式。
export default function Welcome() {
const [active,setActive] = useState(0);
const nextAction = () => {
}
const skipAction = () => {
}
return (
<SafeAreaView style={styles.container}>
<StatusBar style="auto" />
<View style={styles.cardContainer}>
<WelcomeCard />
</View>
<View style={styles.cardTextContainer}>
<Text style={styles.cardText}>Let’s make learning more fun than ever.</Text>
</View>
<View style={styles.buttonContainer}>
<View>
<TouchableOpacity style={styles.skipButton} onPress={skipAction}>
<Text style={styles.buttonText}>Skip</Text>
</TouchableOpacity>
</View>
<View>
<Dots length={2} active={active} />
</View>
<View>
<TouchableOpacity style={styles.nextButton} onPress={nextAction}>
<Text style={styles.buttonText}>Next</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,marginTop: 50,marginBottom: 20,backgroundColor: '#fff',justifyContent: 'space-between',buttonContainer : {
flexDirection: 'row',justifyContent: 'space-evenly',cardTextContainer : {
width: 221,textAlign: 'center',marginLeft: 'auto',marginRight: 'auto',cardContainer : {
flexDirection: 'row',alignItems: 'center',justifyContent: 'center',cardText: {
fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,lineHeight: 21,skipButton: {
borderRadius: 20,backgroundColor: '#4F74F7',width: 81,height: 40,nextButton: {
borderRadius: 20,buttonText: {
fontFamily: 'Roboto',fontWeight: '700',fontSize: 15,lineHeight: 16,color: '#fff'
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。