推荐项目:React Native Navigation - 跨平台移动应用导航框架
React Native Navigation 是一个用于React Native应用程序的跨平台导航库。以下是一个简单的例子,展示如何使用React Native Navigation创建一个基本的堆栈导航器:
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { Text, Button } from 'react-native';
// 创建一个Stack Navigator
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 back to Home"
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 Native Navigation库创建一个简单的堆栈导航器,并包含了两个屏幕:HomeScreen和DetailsScreen。用户可以通过按钮从主屏幕导航到详情屏幕,然后通过按钮返回主屏幕。这个例子提供了一个清晰的起点,用于学习和构建跨平台的移动应用程序。
评论已关闭