我正在参加世博会并为此来回奔波。我正在尝试清理内容顶部和底部的标题部分。当我在没有导航容器的情况下运行代码时,一切都按设计正常工作,但现在我必须路由新屏幕并绑定到按钮,我无法删除它。我尝试了从主容器样式表将边距设置为 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,
alignItems: 'center',
justifyContent: 'center',
},
nextButton: {
borderRadius: 20,
backgroundColor: '#4F74F7',
width: 81,
height: 40,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '700',
fontSize: 15,
lineHeight: 16,
color: '#fff'
}
});