React Native中的嵌套导航未编译

Question

我是嵌套导航的新手。我试图遵循这里的原则-然而我得到了错误

找不到导航对象。您的组件在NavigationContainer中吗？

为了便于调试和共享代码，我将"屏幕"引入了主App.js。下面是我的代码。

我正在尝试在其中两个屏幕("模式"one_answers"一步"(上创建一个带有Nav Drawer的主屏幕，然后我正在尝试实现堆叠导航，因为其中会有列表和详细屏幕。

import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator} from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
// import HomeScreen from './screens/HomeScreen';
// import PatternsScreen from './screens/patterns/PatternsScreen';
// import OneStepScreen from './screens/one_step/OneStepScreen';
import { Ionicons } from '@expo/vector-icons';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function HomeScreen(){
return(
<View>
<Text>This is the Home Screen. This will contain two large Squares which are buttons to access Patterns and One Step</Text>
</View>
);
}
function PatternsScreen(){
return(
<View>
<Text>This is the Patterns Screen. This will contain Stacked navigation of all patterns</Text>
</View>
);
}
function OneStepScreen(){
return(
<View>
<Text>This is the OneStep Screen. This will contain Stacked navigation of all OneStep</Text>
<Button title="Go To Details" onPress={navigation.navigate('One Step Details', )}></Button>
<Stack.Navigator>
<Stack.Screen name="One Step Details" component={OneStepDetail} />
</Stack.Navigator>
</View>
);
}
export default function App() {
const navigation = useNavigation();
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Patterns" component={PatternsScreen} />
<Drawer.Screen name="One Step" component={OneStepScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}

Answer 1

在定义NavigationContainer之前调用useNavigation，这不应该起作用。将组件(例如<AppNavigator />(作为NavigationContainer的子级，然后尝试在该组件中构建导航。

export default function App() {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
)
}

您的NavigationContainer也让我相当困惑。因此，您可以在父导航器或其他导航器中设置屏幕。

这是正确的：

<Drawer.Screen name="Home" component={HomeScreen} /> 

我会重命名它，因为你正在尝试在这里使用StackNavigator：

<Drawer.Screen name="One Step" component={OneStepScreen} /> 

类似于这个例子：

<Drawer.Screen name="One Step" component={OneSctepStack} /> 

然后在OneStepStack(以前的oneStepScreen(中，你不能将普通的JSX与Stack.Navigator.混合

function OneStepStack(){
return(
<Stack.Navigator>
<Stack.Screen name="One Step Details" component={OneStepDetail} />
</Stack.Navigator>
);
}