英文:
React Native file name
问题
如何移除那个额外的导航栏，上面写着"index"？
尝试了3天仍然搞不清楚为什么只使用Stack屏幕时没有额外的索引。我尝试使用
我按照文档的要求，只有一个空项目，但文件名仍然显示在顶部。
有人遇到Drawer的相同问题吗？
<Drawer.Navigator initialRouteName="Home"
screenOptions={({ route }) => ({
drawerLabel: () => null, // 隐藏默认页面名称标签
drawerIcon: ({ focused }) => (
// 您也可以在此处渲染一个图标，而不是名称
<CustomDrawerScreen name={route.name} />
),
})}
>
<Drawer.Screen name="Home" component={HomeContent} />
</Drawer.Navigator>
export default function HomeContent(){
return (
<SafeAreaView style={{flex: 1, backgroundColor: "#FAFAFC"}}>
<Stack.Screen
options={
{
headerStyle: {
backgroundColor: COLORS.primary
},
headerShadowVisible: false,
headerLeft: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}
onPress={(navigation) => {
navigation.openDrawer()
}}
>
<Image
style={{
width: "70%",
height: "70%",
}}
source={menu}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={notify}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerTitle: ""
}
}>
</Stack.Screen>
<View style={{marginBottom: 100}}>
<Svg
style={{position: "absolute", top: -68}}
height="300"
viewBox="0 0 1315 605"
width="100%"
dimension={"100%"}
>
<Path
fill={COLORS.primary}
d={'M0,160L21.8,138.7C43.6,117,87,75,131,85.3C174.5,96,218,160,262,165.3C305.5,171,349,117,393,122.7C436.4,128,480,192,524,213.3C567.3,235,611,213,655,192C698.2,171,742,149,785,144C829.1,139,873,149,916,144C960,139,1004,117,1047,138.7C1090.9,160,1135,224,1178,208C1221.8,192,1265,96,1309,48C1352.7,0,1396,0,1418,0L1440,0L1440,0L1418.2,0C1396.4,0,1353,0,1309,0C1265.5,0,1222,0,1178,0C1134.5,0,1091,0,1047,0C1003.6,0,960,0,916,0C872.7,0,829,0,785,0C741.8,0,698,0,655,0C610.9,0,567,0,524,0C480,0,436,0,393,0C349.1,0,305,0,262,0C218.2,0,175,0,131,0C87.3,0,44,0,22,0L0,0Z'}
/>
</Svg>
<View style={{
width: "100%",
position: "absolute",
top: 60,
left: 20,
paddingBottom: 5
}}>
<Text style={{
fontSize: SIZES.medium,
}}>
你好 David
</Text>
<Text style={{
fontWeight: "bold",
fontSize: SIZES.medium,
}}>
你的观看列表今天
</Text>
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: COLORS.primary, padding: 4, borderRadius: SIZES.medium,
position: "absolute",
right: 45,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={add}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
</View>
<View style={{
flex: 1,
padding: SIZES.medium,
justifyContent: "center"
}}>
{isLoading ? <ActivityIndicator size="large" color={COLORS.primary}/>
: error ? (
<Text>出错了</Text>
) : data.length === 0 ?
(
<View style={{
flex: 1,
width: "100%",
padding: SIZES.medium,
justifyContent: "center",
alignItems: "center",
}}>
<View style={{
backgroundColor: COLORS.secondary,
padding: 20,
borderRadius: 10
}}>
<Text style={{
color: COLORS.white,
fontWeight: 600
}}
>没有可用数据</Text>
</View>
</View>
) : (
<FlatList data={data} renderItem={({item}) => (
<TouchableOpacity style={{
backgroundColor: COLORS.thirty,
borderRadius: 10,
margin: 5,
shadowColor: COLORS.primary,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 3.84,
elevation: 5,
padding: SIZES.small,
}}>
<View style={{
flex: 1,
justifyContent: "space-between",
flexDirection: "row",
borderRadius: SIZES.small,
backgroundColor: "#FFF",
shadowColor: COLORS.white,
alignItems: "center"
}}>
<View
style={{
width: 50,
height: 50,
backgroundColor: "#FFF",
borderRadius: SIZES.medium,
justifyContent: "center"
}}
>
<Image
<details>
<summary>英文:</summary>
How to remove that extra navigation bar where is saying index?
3 days trying to figure it out Can't understand why when I use just Stack screen no extra index . I just try use <Drawer> index appears .
I follow docs with just empty project same thing there name file displayed on top
Any one had same issues with Drawer ?
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/y92ne.png
<Drawer.Navigator initialRouteName="Home"
screenOptions={({ route }) => ({
drawerLabel: () => null, // Hide the default page name label
drawerIcon: ({ focused }) => (
// You can also render an icon here instead of the name
<CustomDrawerScreen name={route.name} />
),
})}
>
<Drawer.Screen name="Home" component={HomeContent} />
</Drawer.Navigator>
export default function HomeContent(){
return (
<SafeAreaView style={{flex: 1, backgroundColor: "#FAFAFC"}}>
<Stack.Screen
options={
{
headerStyle: {
backgroundColor: COLORS.primary
},
headerShadowVisible: false,
headerLeft: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}
onPress={(navigation) => {
navigation.openDrawer()
}}
>
<Image
style={{
width: "70%",
height: "70%",
}}
source={menu}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={notify}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerTitle: ""
}
}>
</Stack.Screen>
<View style={{marginBottom: 100}}>
<Svg
style={{position: "absolute", top: -68}}
height="300"
viewBox="0 0 1315 605"
width="100%"
dimension={"100%"}
>
<Path
fill={COLORS.primary}
d={'M0,160L21.8,138.7C43.6,117,87,75,131,85.3C174.5,96,218,160,262,165.3C305.5,171,349,117,393,122.7C436.4,128,480,192,524,213.3C567.3,235,611,213,655,192C698.2,171,742,149,785,144C829.1,139,873,149,916,144C960,139,1004,117,1047,138.7C1090.9,160,1135,224,1178,208C1221.8,192,1265,96,1309,48C1352.7,0,1396,0,1418,0L1440,0L1440,0L1418.2,0C1396.4,0,1353,0,1309,0C1265.5,0,1222,0,1178,0C1134.5,0,1091,0,1047,0C1003.6,0,960,0,916,0C872.7,0,829,0,785,0C741.8,0,698,0,655,0C610.9,0,567,0,524,0C480,0,436,0,393,0C349.1,0,305,0,262,0C218.2,0,175,0,131,0C87.3,0,44,0,22,0L0,0Z'}
/>
</Svg>
<View style={{
width: "100%",
position: "absolute",
top: 60,
left: 20,
paddingBottom: 5
}}>
<Text style={{
fontSize: SIZES.medium,
}}>
Hello David
</Text>
<Text style={{
fontWeight: "bold",
fontSize: SIZES.medium,
}}>
Your watch list today
</Text>
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: COLORS.primary, padding: 4, borderRadius: SIZES.medium,
position: "absolute",
right: 45,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={add}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
</View>
<View style={{
flex: 1,
padding: SIZES.medium,
justifyContent: "center"
}}>
{isLoading ? <ActivityIndicator size="large" color={COLORS.primary}/>
: error ? (
<Text>Something went wrong</Text>
) : data.length === 0 ?
(
<View style={{
flex: 1,
width: "100%",
padding: SIZES.medium,
justifyContent: "center",
alignItems: "center",
}}>
<View style={{
backgroundColor: COLORS.secondary,
padding: 20,
borderRadius: 10
}}>
<Text style={{
color: COLORS.white,
fontWeight: 600
}}
>No data available</Text>
</View>
</View>
) : (
<FlatList data={data} renderItem={({item}) => (
<TouchableOpacity style={{
backgroundColor: COLORS.thirty,
borderRadius: 10,
margin: 5,
shadowColor: COLORS.primary,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 3.84,
elevation: 5,
padding: SIZES.small,
}}>
<View style={{
flex: 1,
justifyContent: "space-between",
flexDirection: "row",
borderRadius: SIZES.small,
backgroundColor: "#FFF",
shadowColor: COLORS.white,
alignItems: "center"
}}>
<View
style={{
width: 50,
height: 50,
backgroundColor: COLORS.white,
borderRadius: SIZES.medium,
justifyContent: "center"
}}
>
<Image
style={{
width: "70%",
height: "70%",
}}
source={photo}
/>
</View>
<View style={{
flex: 1,
justifyContent: "center"
}}>
<Text>{item.name}</Text>
<Text>20 y.o</Text>
</View>
<TouchableOpacity style={{
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: COLORS.primary,
borderRadius: SIZES.small,
}}>
<MaterialCommunityIcons name="check" size={24} color={COLORS.secondary}
onPress={() => {
console.log(item.name)
}}
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item?.id}
contentContainerStyle={{columnGap: SIZES.xSmall}}
vertical
/>
)
}
</View>
</SafeAreaView>
);
}
</details>
# 答案1
**得分**: 0
主要是_layout.js文件位于应用程序文件夹中，包裹了整个项目。
要移除标题，可以使用以下代码：
```jsx
screenOptions={{
headerShown: false
}}
英文:
Solution very simple .
main _layout.js file in app folder wraps whole project.
To remove header
screenOptions={{
headerShown: false
}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论