推荐项目:React Native Router
React Native Router是一个用于React Native应用程序的路由库。它提供了一种声明式的方式来定义应用程序的导航路径,并在应用程序的UI中进行导航。
以下是一个简单的React Native Router的使用示例,使用React Native Router的<Stack.Navigator>
组件来定义一个堆栈导航器,并设定两个路由页面:Home和Details。
首先,安装必要的库:
npm install @react-navigation/native
npm install react-native-reanimated
npm install react-native-gesture-handler
npm install @react-navigation/stack
然后,在你的React Native应用程序中使用如下代码:
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// 定义堆栈导航器
const Stack = createStackNavigator();
// Home页面组件
function Home({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
// Details页面组件
function Details({ 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 initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
</NavigationContainer>
);
}
在这个例子中,我们创建了一个名为App的React组件,它使用<NavigationContainer>
来包裹整个应用程序的导航结构。<Stack.Navigator>
定义了一个堆栈导航器,并通过<Stack.Screen>
组件定义了两个页面:Home和Details。每个页面都可以通过navigation
prop来进行页面间的导航。
评论已关闭