作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是react-native的初学者,我按照youtube上的教程做项目。我正在尝试制作一个 expo ui-app,但每个屏幕的顶部都有一个标题,如下所示:
屏幕上方有Explore字样,其他屏幕上方也有相应的标题。有没有办法删除它?因为我关注了 youtube 上的教程,但他们没有这个标题。
这是 Explore.js 文件:
import { StyleSheet, Text, View, SafeAreaView, TextInput, Platform, StatusBar } from 'react-native';
import React, { Component } from 'react';
import { Ionicons } from '@expo/vector-icons';
class Explore extends Component {
componentWillMount() {
this.startHeaderHeight = 80
if(Platform.OS == 'android')
{
this.startHeaderHeight = 100 + StatusBar.currentHeight
}
}
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View style={{ height: this.startHeaderHeight, backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#dddddd' }}>
<View style={{flexDirection: 'row', padding: 10, backgroundColor: 'white', marginHorizontal: 20, shadowOffset:{width:0,height:0}, shadowColor: 'black', shadowOpacity: 0.2, elevation: 1, marginTop: Platform.OS == 'android' ? 30 : 20 }}>
<Ionicons name="ios-search" size={20} color="black" />
<TextInput
underlineColorAndroid="transparent"
placeholder='Try Indonesia'
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: '700', backgroundColor: 'white', marginLeft: 10 }}
/>
</View>
</View>
</View>
</SafeAreaView>
);
}
}
export default Explore;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
这是我的 app.js 文件:
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
import Explore from './screens/Explore';
import Saved from './screens/Saved';
import Trips from './screens/Trips';
import Inbox from './screens/Inbox';
const Tab = createBottomTabNavigator();
export default function BottomTabs() {
return (
<NavigationContainer>
<..... CODE OF THE BOTTOM TAB NAVIGATOR IN HERE .....>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
最佳答案
David Scholz 的解决方案适用于单个屏幕。如果你想在导航器的所有子屏幕上禁用标题,你可以使用
screenOptions={{ headerShown: false }}
作为 Tab.Navigator
或任何顶级导航器的 Prop 。
关于javascript - 有没有办法删除世博会每个屏幕上的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71285300/
我是一名优秀的程序员,十分优秀!