探索WAAppRouting:强大的React Native路由库
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
// 定义页面组件
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen({ navigation, route }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>Item Id: {route.params.itemId}</Text>
</View>
);
}
// 创建导航器
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
// 应用容器包装导航器
const AppContainer = createAppContainer(AppNavigator);
// 导出应用容器,以供其他组件或文件使用
export default AppContainer;
这段代码展示了如何使用react-navigation-stack
创建一个简单的React Native应用,其中包含了两个页面:HomeScreen和DetailsScreen。它演示了如何定义一个React组件,如何使用createStackNavigator
创建一个导航器,并最终使用createAppContainer
将导航器包装成可以在应用中使用的容器。这是学习React Native路由的一个很好的起点。
评论已关闭