#### 安装react-navigation模块 `npm install --save react-navigation` #### 完整代码 ~~~ import React from 'react'; import { View, Text,Button } from 'react-native'; import { StackNavigator } from 'react-navigation'; import { TabNavigator } from 'react-navigation'; const HomeScreen = () => ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> </View> ); const ProfileScreen = () => ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Profile Screen</Text> </View> ); const RootTabs = TabNavigator({ Home: { screen: HomeScreen, }, Profile: { screen: ProfileScreen, }, },{ tabBarPosition: 'bottom', animationEnabled: true, tabBarOptions: { activeTintColor: '#ffffff', } }); export default RootTabs; ~~~ ![](https://box.kancloud.cn/dfe4309be434b369806afaaed5acca75_579x956.png) 文档地址:https://reactnavigation.org/docs/intro/quick-start #### 完整package.json文件代码 ~~~ { "name": "AwesomeProject", "version": "0.1.0", "private": true, "devDependencies": { "react-native-scripts": "1.9.0", "jest-expo": "23.0.0", "react-test-renderer": "16.0.0" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch" }, "jest": { "preset": "jest-expo" }, "dependencies": { "expo": "^23.0.4", "react": "16.0.0", "react-native": "0.50.3", "react-navigation": "^1.0.0-beta.27" } } ~~~