推荐:React Native Router v4 - 简化你的导航体验
React Native Router v4 是一个用于React Native应用程序的路由库。以下是一个简单的例子,展示如何使用该库创建一个简单的导航结构:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
// 定义你的页面组件
const HomeScreen = () => (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
const DetailsScreen = () => (
<View style={styles.container}>
<Text>Details Screen</Text>
</View>
);
// 创建导航器
const AppNavigator = StackNavigator({
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
});
export default class App extends React.Component {
render() {
// 渲染AppNavigator,这将渲染整个应用
return <AppNavigator />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
这个例子展示了如何使用StackNavigator
创建一个包含两个页面(Home和Details)的简单应用程序。AppNavigator
是整个应用的路由器,你可以在App
组件中渲染它。这个例子提供了一个基本的导航结构,并且可以根据需要扩展,添加更多的页面和复杂性。
评论已关闭