从react导航堆栈配置中访问默认参数可以通过以下步骤实现:
以下是一个示例代码:
// 导航堆栈配置
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
initialParams={{ name: 'John' }} // 设置默认参数
/>
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
// HomeScreen组件
function HomeScreen({ navigation, route }) {
const { name } = route.params; // 获取默认参数的值
return (
<View>
<Text>Welcome, {name}!</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
// DetailsScreen组件
function DetailsScreen({ navigation }) {
return (
<View>
<Text>Details Screen</Text>
</View>
);
}
在上述示例中,HomeScreen组件通过route.params获取默认参数的值,并在欢迎消息中显示出来。当用户点击按钮导航到DetailsScreen时,不需要传递任何参数,因为默认参数已经在堆栈配置中设置好了。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云