react-native - 错误：已为此容器注册了另一个导航器。您可能在单个“NavigationContainer”或“Screen”下有多个导航器
问题描述
我使用了 Nativebase 选项卡和堆栈导航器，但试图在第二个 Nativebase 选项卡中显示名为 StudyNavigator 的堆栈导航器，我收到以下错误：
Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure ea
ch navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.
This error is located at:
in StackNavigator (at StudyNavigator.js:10)
in StudyNavigator (at HomeTab.js:32)
in RCTView (at View.js:34)
in View (at Tab.js:11)
in Tab (at connectStyle.js:392)
in Styled(Tab) (at HomeTab.js:29)
in StaticContainer (at SceneComponent.js:12)
in RCTView (at View.js:34)
in View (at SceneComponent.js:11)
in SceneComponent (at Tabs/index.js:219)
in AndroidHorizontalScrollContentView (at ScrollView.js:1124)
in AndroidHorizontalScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at Tabs/index.js:184)
in RCTView (at View.js:34)
in View (at Tabs/index.js:344)
in ScrollableTabView (at HomeTab.js:21)
in RCTView (at View.js:34)
in View (at Container.js:12)
in Container (at connectStyle.js:392)
in Styled(Container) (at HomeTab.js:19)
in TabsExample
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:16)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
以下是我的组件
- 选项卡 1
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, Image, View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import {H3, H1, H2, Button} from "native-base"
import { MaterialCommunityIcons} from "@expo/vector-icons"
import { Video, AVPlaybackStatus } from 'expo-av';
import {useNavigation} from "@react-navigation/native";
import SampleCarousel from "./SampleCarousel";
export default function Tab1() {
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
const navigation = useNavigation();
return (
<SafeAreaView>
<ScrollView style={styles.scrollView}>
<View style={[styles.listItemStyleView,{alignItems: "center", padding: 10}]}>
{/*<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />*/}
<View style={[styles.listInnerView, {textAlign: "center", color: "white", padding: 10, alignItems: "center"}]}>
<Text style={{textAlign: "center", color: "gray"}}>{new Date().toDateString()}</Text>
<H3 style={{fontSize: 16, textAlign: "center"}}>Last Saturday of May</H3>
</View>
</View>
<View style={styles.videoContainer}>
<Video
ref={video}
style={styles.video}
source={{
uri: 'https://rockapostolate.com/wp-content/uploads/2021/05/10000000_2753412481538460_8020631250965320394_n-1.mp4',
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.videoButtons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
</View>
<Image source={require("../assets/today.jpg")} style={styles.videoImage} />
<TouchableOpacity onPress={()=> {
console.log("Clicked")
navigation.navigate("Readings")
}}>
<View style={styles.listItemStyleView}>
<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />
<View style={styles.listInnerView}>
<Text>Today's Reading</Text>
<H3>Sirach 51:12c-20b</H3>
</View>
</View>
</TouchableOpacity>
<View style={styles.listItemStyleView}>
<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />
<View style={styles.listInnerView}>
<Text>Today's Reflections</Text>
<H3>Today With Fr. Rich</H3>
</View>
</View>
<View style={[styles.listItemStyleView,{alignItems: "center", padding: 10}]}>
<View style={[styles.listInnerView, {textAlign: "center", color: "white", padding: 10, alignItems: "center"}]}>
<Text style={{textAlign: "center", color: "grey"}}>Saint of the Day</Text>
<H3 style={{fontSize: 16, textAlign: "center"}}>Saint Madeleine Sophie Barat</H3>
</View>
</View>
<SampleCarousel/>
<View style={[styles.listItemStyleView,{padding: 0}]}>
<Image source={require("../assets/rock3.jpg")} style={{width:"100%", height: 100}} />
</View>
<View style={[styles.listItemStyleView,{padding: 20, justifyContent: "space-around", backgroundColor: "#7E191B"}]}>
<View style={[styles.smView,{justifyContent: "space-around"}]}>
<MaterialCommunityIcons name="facebook" size={22} style={{marginHorizontal: 20, color: "white",}} />
{/*<MaterialCommunityIcons name="twitter" size={25} style={{marginHorizontal: 5, color: "white"}} />*/}
<MaterialCommunityIcons name="instagram" size={21} style={{marginHorizontal: 20, color: "white"}} />
<MaterialCommunityIcons name="youtube" size={22} style={{marginHorizontal: 20, color: "white"}} />
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
backgroundColor: 'white',
},
text: {
fontSize: 42,
},
videoImage: {
resizeMode: "stretch",
width: "100%",
height: 300
},
listItemStyleView: {
flexDirection: "row",
padding: 20,
width: "100%",
borderBottomColor: "black",
borderBottomWidth: 1
},
listImage: {
height: 75,
width: 75,
marginRight: 20
},
listInnerView: {
justifyContent: "center",
alignItems: "flex-end",
right: 0,
flexGrow: 1,
paddingRight: 10
},
smView: {
flexDirection: "row"
},
videoContainer: {
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
video: {
alignSelf: 'center',
width: "100%",
height: 200,
},
videoButtons: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
- 选项卡 2
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, Image, View } from 'react-native';
import Constants from 'expo-constants';
import {H3, H1, H2, Button} from "native-base"
import { MaterialCommunityIcons} from "@expo/vector-icons"
export default function Tab2() {
return (
<SafeAreaView>
<ScrollView style={styles.scrollView}>
<View style={styles.listItemStyleView}>
<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />
<View style={styles.listInnerView}>
<Text>The Bible</Text>
<H3>God's Word</H3>
</View>
</View>
<Image source={require("../assets/bible.png")} style={styles.videoImage} />
<View style={styles.listItemStyleView}>
<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />
<View style={styles.listInnerView}>
<Text>Devotional</Text>
<Text style={{fontSize: 20, textAlign: "right"}}>Devotion to Christ {"\n"} the King</Text>
</View>
</View>
<Image source={require("../assets/devotion.jpg")} style={styles.videoImage} />
<View style={styles.listItemStyleView}>
<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />
<View style={styles.listInnerView}>
<Text>Prayer Guide</Text>
<Text style={{fontSize: 20, textAlign: "right"}}>Way of the Cross to {"\n"}the Crown</Text>
</View>
</View>
<Image source={require("../assets/cross_to_crown2.jpg")} style={styles.videoImage} />
<View style={[styles.listItemStyleView,{padding: 0}]}>
<Image source={require("../assets/rock3.jpg")} style={{width:"100%", height: 100}} />
</View>
{/*<View style={{justifyContent: "center", alignItems: "center", padding: 20, borderBottomWidth: 1}}>*/}
{/* /!*<Image source={require("../assets/today_offer.jpg")} style={styles.listImage} />*!/*/}
{/* <View style={{textAlign: "center", borderBottomColor: "black"}}>*/}
{/* <H1>Discover Jesus Now</H1>*/}
{/* <Button primary style={{alignSelf: "center", width: 150, justifyContent: "center", marginTop: 5}}>*/}
{/* <Text style={{color: "white"}}>Click Me!</Text>*/}
{/* </Button>*/}
{/* </View>*/}
{/*</View>*/}
{/*<View style={[styles.listItemStyleView,{padding: 0}]}>*/}
{/* <Image source={require("../assets/rock4.jpg")} style={{width:"100%", height: 100, resizeMode: "stretch"}} />*/}
{/*</View>*/}
<View style={[styles.listItemStyleView,{padding: 20, justifyContent: "space-around", backgroundColor: "#7E191B"}]}>
<View style={[styles.smView,{justifyContent: "space-around"}]}>
<MaterialCommunityIcons name="facebook" size={22} style={{marginHorizontal: 20, color: "white",}} />
{/*<MaterialCommunityIcons name="twitter" size={25} style={{marginHorizontal: 5, color: "white"}} />*/}
<MaterialCommunityIcons name="instagram" size={21} style={{marginHorizontal: 20, color: "white"}} />
<MaterialCommunityIcons name="youtube" size={22} style={{marginHorizontal: 20, color: "white"}} />
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
backgroundColor: '#ffffff',
},
text: {
fontSize: 42,
},
videoImage: {
resizeMode: "stretch",
width: "100%",
height: 250
},
listItemStyleView: {
flexDirection: "row",
padding: 20,
width: "100%",
borderBottomColor: "black",
borderBottomWidth: 1
},
listImage: {
height: 75,
width: 75,
marginRight: 20
},
listInnerView: {
justifyContent: "center",
alignItems: "flex-end",
right: 0,
flexGrow: 1,
paddingRight: 10
},
smView: {
flexDirection: "row"
}
});
- 第一个堆栈导航器（完美运行）
import React from 'react';
import {createStackNavigator} from "@react-navigation/stack";
import Tab1 from "../components/Tab1";
import Readings from "./Readings";
const Stack = createStackNavigator()
function ReadingsNavigator(props) {
return (
<Stack.Navigator>
<Stack.Screen name="Tab1" component={Tab1}
options={{
headerShown: false
}}/>
<Stack.Screen name="Readings" component={Readings}
options={{
headerShown: true
}}/>
</Stack.Navigator>
);
}
export default ReadingsNavigator;
- 第二个堆栈导航器（产生错误）
import React from 'react';
import {createStackNavigator} from "@react-navigation/stack";
import Tab2 from "../components/Tab2";
import Devotion from "./devotion";
const Stack = createStackNavigator()
const StudyNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="T2" component={Tab2} />
<Stack.Screen name="Devotion" component={Devotion} />
</Stack.Navigator>
);
};
export default StudyNavigator;
- 父本机基础 TabNavigator
import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, TabHeading } from 'native-base';
import {Text} from "react-native";
import Tab2 from "../components/Tab2";
import Tab3 from "../components/Tab3";
import ReadingsNavigator from "./ReadingsNavigator";
import StudyNavigator from "./StudyNavigator";
export default class TabsExample extends Component {
render() {
return (
<Container>
<Header hasTabs style={{backgroundColor: "#7E191B", borderTopColor: "transparent", borderTopWidth: 0}} />
<Tabs locked={true} tabStyle={{backgroundColor: "#7E191B", color:"red"}}>
<Tab heading={
<TabHeading style={{backgroundColor: '#7E191B'}} textStyle={{color: "white"}}>
<Text style={{color: '#ffffff'}}>Home</Text>
</TabHeading>} style={{backgroundColor: "white"}} tabStyle={{backgroundColor: "#B14E52"}}
>
<ReadingsNavigator />
</Tab>
<Tab heading={<TabHeading style={{backgroundColor: '#7E191B'}} textStyle={{color: "white"}}>
<Text style={{color: '#ffffff'}}>Study</Text>
</TabHeading>} style={{backgroundColor: "white"}} tabStyle={{backgroundColor: "#B14E52"}}>
<StudyNavigator />
</Tab>
<Tab heading={<TabHeading style={{backgroundColor: '#7E191B'}} textStyle={{color: "white"}}>
<Text style={{color: '#ffffff'}}>Media</Text>
</TabHeading>} style={{backgroundColor: "white"}} tabStyle={{backgroundColor: "#B14E52"}}>
<Tab3 />
</Tab>
</Tabs>
</Container>
);
}
}
- 应用程序.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomeTab from "./app/screens/HomeTab";
import Tab1 from "./app/components/Tab1";
import SampleCarousel from "./app/components/SampleCarousel";
import Readings from "./app/screens/Readings";
import {NavigationContainer} from "@react-navigation/native";
import Devotion from "./app/screens/devotion";
import WayOfCross from "./app/screens/wayOfCross";
import BooksNavigator from "./app/screens/BooksNavigator";
import StudyNavigator from "./app/screens/StudyNavigator";
export default function App() {
return (
<NavigationContainer>
<HomeTab />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#1ecbe1',
alignItems: 'center',
justifyContent: 'center',
},
});
解决方案
推荐阅读
- typescript - 如何修复 TypeScript 在 localstorage.get 上抛出错误
- extjs - ExtJS 7 Force Froala 编辑器以适应父组件大小
- ios - 我们可以指示 PAServer 执行自定义命令吗？
- spark-submit - 最近有人运行 spark-submit 吗？
- c - 如何获得数组大小均为 10 的 txt 文件和二进制文件的总和？
- amazon-web-services - AWS CloudFormation 模板生成问题
- c# - 使用 NCrontab 进行每日运行的 Cron 表达式，从任何给定时间开始，间隔 50 分钟
- reactjs - ReactJS中useEffect Hook中增加索引计数器的问题
- android - 由于上下文问题，隐式意图不起作用
- qt - 在 QGraphicsItemGroup 的 Qt setFocus() 中