探索ReactNavigationDemo:构建高效导航的React Native实践
import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// 创建StackNavigator
const Stack = createStackNavigator();
// 定义一个简单的屏幕组件
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details again"
onPress={() => navigation.push('Details')}
/>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
</View>
);
}
// 应用的根组件
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
这个代码实例展示了如何使用React Navigation库创建一个简单的React Native应用,其中包含了一个主屏幕和一个详细信息屏幕。用户可以在两个屏幕之间导航,并且提供了一个清晰的导航结构。这个例子是学习和实践React Navigation的一个很好的起点。
评论已关闭