330_完成标题栏导航栏等前端基本结构

README.md

+# 卷王自习室
+#介绍：
+此为卷王自习室的前端RN项目，由火箭队进行开发
+
+# 注意事项
+* 如果安装了依赖插件但是还是报错找不到，用yarn add 添加一下
+
+#目前安装的插件：
+* UI库：添加了react-native-elements 库吗，网址：https://reactnativeelements.com/
+* 图标库：添加了react-native-vector-icons 图标库
+* 底部菜单栏：react-native-tab-navigator
+

component/Header/index.js

+import React, {Component} from 'react';
+import {Header, Divider} from 'react-native-elements';
+import {StyleSheet, Text, StatusBar, View} from 'react-native';
+
+class MyHeader extends Component {
+  //defaultProps 可以为 Class 组件添加默认 props,基于 static 的写法
+
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <StatusBar
+          translucent={true}
+          backgroundColor="transparent"
+          barStyle="dark-content"
+        />
+        <Divider style={styles.divider} />
+        <Header
+          backgroundColor={'#CE9561'}
+          centerComponent={{
+            text: this.props.title,
+            style: {
+              color: '#592202',
+              fontSize: 20,
+              fontWeight: 'bold',
+            },
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  divider: {
+    marginTop: 20,
+    height: 1,
+    backgroundColor: 'CE9561',
+  },
+});
+export default MyHeader;

component/Map/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+class Map extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Map地图模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Map;

component/Mine/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+class Mine extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Mine个人主页模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Mine;

component/Navigation/index.js

+import React, {Component} from 'react';
+import {View, Text, Image, StyleSheet} from 'react-native';
+import TabNavigator from 'react-native-tab-navigator';
+import Map from '../Map';
+import Study from '../Study';
+import Mine from '../Mine';
+class Navigation extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {selectedTab: '地图'};
+  }
+
+  render() {
+    return (
+      <TabNavigator
+        tabBarStyle={{
+          backgroundColor: '#CE9561',
+          height: 'auto',
+          color: 'red',
+          paddingBottom: 15,
+        }}>
+        <TabNavigator.Item
+          selected={this.state.selectedTab === '地图'}
+          title="地图"
+          titleStyle={styles.tabText}
+          selectedTitleStyle={styles.selectedTabText}
+          renderIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/map.png')}
+            />
+          )}
+          renderSelectedIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/sel_map.png')}
+            />
+          )}
+          onPress={() => this.setState({selectedTab: '地图'})}>
+          <Map />
+        </TabNavigator.Item>
+
+        <TabNavigator.Item
+          selected={this.state.selectedTab === '自习'}
+          title="自习"
+          titleStyle={styles.tabText}
+          selectedTitleStyle={styles.selectedTabText}
+          renderIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/study.png')}
+            />
+          )}
+          renderSelectedIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/sel_study.png')}
+            />
+          )}
+          onPress={() => this.setState({selectedTab: '自习'})}>
+          <Study />
+        </TabNavigator.Item>
+
+        <TabNavigator.Item
+          selected={this.state.selectedTab === '我'}
+          title="我"
+          titleStyle={styles.tabText}
+          selectedTitleStyle={styles.selectedTabText}
+          renderIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/mine.png')}
+            />
+          )}
+          renderSelectedIcon={() => (
+            <Image
+              style={styles.icon}
+              source={require('../../images/Navigation/sel_mine.png')}
+            />
+          )}
+          onPress={() => this.setState({selectedTab: '我'})}>
+          <Mine />
+        </TabNavigator.Item>
+      </TabNavigator>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    opacity: 0.5,
+    flex: 1,
+  },
+  icon: {
+    height: 40,
+    width: 40,
+  },
+  tabText: {
+    fontSize: 15,
+    color: '#9f5022',
+    // fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  selectedTabText: {
+    fontSize: 15,
+    color: '#592202',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Navigation;

component/Study/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+class Study extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Study自习模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Study;

index.js

@@ -3,7 +3,9 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
 import {name as appName} from './app.json';
+import Navigation from './component/Navigation/index';
+import MyHeader from './component/Header/index';
+import Home from './page/Home/index';
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => Home);

ios/FZUStudyRoom.xcodeproj/project.pbxproj

@@ -14,6 +14,22 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		7699B88040F8A987B510C191 /* libPods-FZUStudyRoom-FZUStudyRoomTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-FZUStudyRoom-FZUStudyRoomTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		358AFC1D135C4660981DE9AB /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ECC2D572E16D412A939D1E1D /* AntDesign.ttf */; };
+		714D523E165D435189943625 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 55DB5461C64D453799F1010D /* Entypo.ttf */; };
+		31E9D19C216F4BD088F54A6E /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D96A5732E8FE4B9CBEC151A0 /* EvilIcons.ttf */; };
+		84C05C12CD954329B6A8603E /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5F7EA42E9B59495999EBAEED /* Feather.ttf */; };
+		74C1EA73F6FE452F8DCF1229 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7257F34F30554CC2A0623019 /* FontAwesome.ttf */; };
+		1AC557382C8F4E5CBE95E706 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE185FE4103148F58C161876 /* FontAwesome5_Brands.ttf */; };
+		AFB7F32CFDD04ABB81E4C0EE /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9BFF2D050EE94B999ABAB947 /* FontAwesome5_Regular.ttf */; };
+		1865FF97C681431E908E3B26 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0C9DCCF8D4D1432B89B89D17 /* FontAwesome5_Solid.ttf */; };
+		6D3592423A0D439AB44B9CC7 /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 91237445B3BD46018F76D77D /* Fontisto.ttf */; };
+		C558AFC1DC0842ADAC68FCFC /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6C2A2E3CEC8A458B811997EF /* Foundation.ttf */; };
+		9AA717F124CC40A480B011EA /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D4E8706B21D84ADDBAA4E5A3 /* Ionicons.ttf */; };
+		8972BEFA420042F29F06C2C4 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 333D609C69DD4563994C1DDC /* MaterialCommunityIcons.ttf */; };
+		CCBDC961625D4D5881CF493B /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C0AF669AEC4D4E0F8240C3E7 /* MaterialIcons.ttf */; };
+		9FCFB9ECE9754F7A8960A2A6 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 38EDB81619ED4459B675FA8F /* Octicons.ttf */; };
+		D2035C817D1B480EAE27C1FF /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2B3C634860304F31B81496CF /* SimpleLineIcons.ttf */; };
+		494E7E23813E4574A6160D0E /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 039184A4E86E42778C904917 /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -44,6 +60,22 @@
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = FZUStudyRoom/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		89C6BE57DB24E9ADA2F236DE /* Pods-FZUStudyRoom-FZUStudyRoomTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FZUStudyRoom-FZUStudyRoomTests.release.xcconfig"; path = "Target Support Files/Pods-FZUStudyRoom-FZUStudyRoomTests/Pods-FZUStudyRoom-FZUStudyRoomTests.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		ECC2D572E16D412A939D1E1D /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		55DB5461C64D453799F1010D /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D96A5732E8FE4B9CBEC151A0 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5F7EA42E9B59495999EBAEED /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		7257F34F30554CC2A0623019 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		EE185FE4103148F58C161876 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		9BFF2D050EE94B999ABAB947 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0C9DCCF8D4D1432B89B89D17 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		91237445B3BD46018F76D77D /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6C2A2E3CEC8A458B811997EF /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D4E8706B21D84ADDBAA4E5A3 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		333D609C69DD4563994C1DDC /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C0AF669AEC4D4E0F8240C3E7 /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		38EDB81619ED4459B675FA8F /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		2B3C634860304F31B81496CF /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		039184A4E86E42778C904917 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/_react-native-vector-icons@9.1.0@react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -122,6 +154,7 @@
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				BBD78D7AC51CEA395F1C20DB /* Pods */,
+				FCA8450C720249628E606B8B /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -148,6 +181,30 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		FCA8450C720249628E606B8B /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				ECC2D572E16D412A939D1E1D /* AntDesign.ttf */,
+				55DB5461C64D453799F1010D /* Entypo.ttf */,
+				D96A5732E8FE4B9CBEC151A0 /* EvilIcons.ttf */,
+				5F7EA42E9B59495999EBAEED /* Feather.ttf */,
+				7257F34F30554CC2A0623019 /* FontAwesome.ttf */,
+				EE185FE4103148F58C161876 /* FontAwesome5_Brands.ttf */,
+				9BFF2D050EE94B999ABAB947 /* FontAwesome5_Regular.ttf */,
+				0C9DCCF8D4D1432B89B89D17 /* FontAwesome5_Solid.ttf */,
+				91237445B3BD46018F76D77D /* Fontisto.ttf */,
+				6C2A2E3CEC8A458B811997EF /* Foundation.ttf */,
+				D4E8706B21D84ADDBAA4E5A3 /* Ionicons.ttf */,
+				333D609C69DD4563994C1DDC /* MaterialCommunityIcons.ttf */,
+				C0AF669AEC4D4E0F8240C3E7 /* MaterialIcons.ttf */,
+				38EDB81619ED4459B675FA8F /* Octicons.ttf */,
+				2B3C634860304F31B81496CF /* SimpleLineIcons.ttf */,
+				039184A4E86E42778C904917 /* Zocial.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -244,6 +301,22 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				358AFC1D135C4660981DE9AB /* AntDesign.ttf in Resources */,
+				714D523E165D435189943625 /* Entypo.ttf in Resources */,
+				31E9D19C216F4BD088F54A6E /* EvilIcons.ttf in Resources */,
+				84C05C12CD954329B6A8603E /* Feather.ttf in Resources */,
+				74C1EA73F6FE452F8DCF1229 /* FontAwesome.ttf in Resources */,
+				1AC557382C8F4E5CBE95E706 /* FontAwesome5_Brands.ttf in Resources */,
+				AFB7F32CFDD04ABB81E4C0EE /* FontAwesome5_Regular.ttf in Resources */,
+				1865FF97C681431E908E3B26 /* FontAwesome5_Solid.ttf in Resources */,
+				6D3592423A0D439AB44B9CC7 /* Fontisto.ttf in Resources */,
+				C558AFC1DC0842ADAC68FCFC /* Foundation.ttf in Resources */,
+				9AA717F124CC40A480B011EA /* Ionicons.ttf in Resources */,
+				8972BEFA420042F29F06C2C4 /* MaterialCommunityIcons.ttf in Resources */,
+				CCBDC961625D4D5881CF493B /* MaterialIcons.ttf in Resources */,
+				9FCFB9ECE9754F7A8960A2A6 /* Octicons.ttf in Resources */,
+				D2035C817D1B480EAE27C1FF /* SimpleLineIcons.ttf in Resources */,
+				494E7E23813E4574A6160D0E /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/FZUStudyRoom/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -51,5 +51,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package-lock.json

@@ -2359,6 +2359,43 @@
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/react": {
+      "version": "18.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.0.6.tgz",
+      "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.67.6",
+      "resolved": "https://registry.npmmirror.com/@types/react-native/-/react-native-0.67.6.tgz",
+      "integrity": "sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-native-vector-icons": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmmirror.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.10.tgz",
+      "integrity": "sha512-z4sexbuZ7nmYsp7Z9YB5fSQoN3KFn6nZA3QsCkQLOYnVmVlxX4U22v/bM9Xx/6dOA1vClxoRZo2CFDX16uryXQ==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -3314,6 +3351,30 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+        }
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -3327,6 +3388,15 @@
       "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colorette": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/colorette/-/colorette-1.4.0.tgz",
@@ -3486,6 +3556,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-2.0.0.tgz",
@@ -4881,6 +4956,21 @@
         "source-map": "^0.7.3"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -7027,6 +7117,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7902,6 +7997,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz",
@@ -8398,11 +8498,114 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-elements": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmmirror.com/react-native-elements/-/react-native-elements-3.4.2.tgz",
+      "integrity": "sha512-m0eAWOn7JuR1wNTNY0WHuaqst4LI/gFE4N5Bbyfsc4DiryWsMST7aAg5w/Gos4IexWIzhLKCIkPxthND1m/8Xg==",
+      "requires": {
+        "@types/react-native-vector-icons": "^6.4.6",
+        "color": "^3.1.2",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.3",
+        "react-native-ratings": "8.0.4",
+        "react-native-size-matters": "^0.3.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "react-native-gradle-plugin": {
       "version": "0.0.6",
       "resolved": "https://registry.npmmirror.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz",
       "integrity": "sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg=="
     },
+    "react-native-ratings": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmmirror.com/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
+      "integrity": "sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "react-native-size-matters": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
+      "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw=="
+    },
+    "react-native-vector-icons": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/react-native-vector-icons/-/react-native-vector-icons-9.1.0.tgz",
+      "integrity": "sha512-2AHZ/h9d/+rC0odz+OwbGNlc1Lik/pHhSixn4HfC8RtQ8CxfSBZ6gg7bTLcZhdSvZN+ZEGi30Fj+ZnOSQy+smg==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.9",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
+          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.4.3.tgz",
@@ -9019,6 +9222,21 @@
         "plist": "^3.0.5"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",

package.json

@@ -11,7 +11,11 @@
   },
   "dependencies": {
     "react": "17.0.2",
-    "react-native": "0.68.1"
+    "react-native": "0.68.1",
+    "react-native-elements": "^3.4.2",
+    "react-native-safe-area-context": "^4.2.4",
+    "react-native-tab-navigator": "^0.3.4",
+    "react-native-vector-icons": "^9.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.17.9",

page/Home/index.js

+import React, {Component} from 'react';
+import {View, Text, StatusBar, StyleSheet} from 'react-native';
+import MyHeader from '../../component/Header';
+import Navigation from '../../component/Navigation';
+class Home extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <MyHeader title="主页" />
+        <Navigation />
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Home;