福大登录验证界面

component/Map/Home.js

@@ -5,12 +5,14 @@ import {
   TouchableOpacity,
   Text,
   Button,
+  Modal,
 } from 'react-native';
 import Drawer from 'react-native-drawer';
 // Drawer组件
 import ControlPanel from './ControlPanel';
 import SchoolMap from './SchoolMap';
 import ExampleOne from './ExampleOne';
+import {CalendarList, DatePicker} from 'react-native-common-date-picker';
 
 class Home extends Component {
   constructor(props) {
@@ -32,6 +34,7 @@ class Home extends Component {
     this.setState({buildingnum: num});
   };
   render() {
+    const {navigation} = this.props;
     return (
       <Drawer
         side="right"
@@ -88,6 +91,13 @@ class Home extends Component {
           onPress={this.openDrawer}
           onChangebuildingnum={this.onChangebuildingnum}
         />
+
+        <Button
+          title={'点我偏好设置'}
+          onPress={() => {
+            navigation.navigate('Recmd1');
+          }}
+        />
         {/*<ScrollView style={styles.container}>*/}
         {/*  /!*<Text>ces</Text>*!/*/}
         {/*  <SchoolMap />*/}

component/Map/index.js

@@ -9,6 +9,7 @@ import {AMapSdk} from 'react-native-amap3d';
 import {Platform} from 'react-native';
 import SchoolMap from './SchoolMap';
 import Home from './Home';
+import LoginView from './loginView';
 
 AMapSdk.init(
   Platform.select({
@@ -63,10 +64,14 @@ class Map extends Component {
         {/*    <Home />*/}
         {/*  </View>*/}
         {/*</ScrollView>*/}
-        <View style={{flex: 1}}>
-          {/*<SchoolMap />*/}
-          <Home />
-        </View>
+
+        <Recmd1 />
+
+        {/*<View style={{flex: 1}}>*/}
+        {/*  /!*<SchoolMap />*!/*/}
+        {/*  /!*<Home />*!/*/}
+        {/*  <LoginView />*/}
+        {/*</View>*/}
       </View>
     );
   }

component/Map/loginView.js

+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+  TextInput,
+  Button,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/AntDesign';
+const {width, height, scale} = Dimensions.get('window');
+class LoginView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: null,
+      password: null,
+      verificationcode: null,
+      iconnum: true,
+      verify_url: 'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=',
+    };
+  }
+  changeusername = text => {
+    this.setState({username: text});
+  };
+  changepassword = text => {
+    this.setState({password: text});
+  };
+  changeverificationcode = text => {
+    this.setState({verificationcode: text});
+  };
+  changeiconnum = () => {
+    this.setState({iconnum: !this.state.iconnum});
+  };
+  render() {
+    const {navigation} = this.props;
+    return (
+      <View style={styles.container}>
+        {/*<Image source={require('./img/icon.png')} style={styles.iconStyle} />*/}
+        <Text>{this.state.username}</Text>
+        <Text>{this.state.password}</Text>
+        <Text>{this.state.verificationcode}</Text>
+        <View>
+          <TextInput
+            placeholder={'请输入用户名'}
+            style={styles.textInputStyle}
+            onChangeText={text => {
+              this.changeusername(text);
+            }}
+          />
+        </View>
+        <View>
+          <TextInput
+            placeholder={'请输入密码'}
+            secureTextEntry={true}
+            selectionColor={'black'}
+            keyboardAppearance={'dark'}
+            style={styles.textInputStyle}
+            onChangeText={text => {
+              this.changepassword(text);
+            }}
+          />
+        </View>
+        <View style={{flexDirection: 'row'}}>
+          <TextInput
+            placeholder={'请输入验证码'}
+            style={styles.textInputStyle2}
+            onChangeText={text => {
+              this.changeverificationcode(text);
+            }}
+          />
+          <TouchableOpacity
+            onPress={() => {
+              this.setState({
+                verify_url:
+                  'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=' +
+                  Math.random(),
+              });
+            }}>
+            <Image
+              resizeMode="contain"
+              source={{uri: this.state.verify_url}}
+              style={{width: width * 0.2, height: 38, resizeMode: 'stretch'}}
+            />
+          </TouchableOpacity>
+        </View>
+        <View style={{flexDirection: 'row'}}>
+          <TouchableOpacity onPress={this.changeiconnum}>
+            {this.state.iconnum ? (
+              <Icon name={'minuscircleo'} size={20} />
+            ) : (
+              <Icon name={'checkcircleo'} size={20} />
+            )}
+          </TouchableOpacity>
+          <Text>阅读并同意用户协议和隐私政策</Text>
+        </View>
+
+        <Button
+          title={'登录'}
+          onPress={() => {
+            navigation.navigate('Home');
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#dddddd',
+  },
+  iconStyle: {
+    width: 80,
+    height: 80,
+    marginTop: 50,
+    marginBottom: 30,
+    borderRadius: 40,
+    borderWidth: 2,
+    borderColor: 'white',
+  },
+  textInputStyle: {
+    height: 38,
+    width: width * 0.9,
+    backgroundColor: 'white',
+    marginBottom: 1,
+    paddingLeft: 10,
+    textAlign: 'left',
+  },
+  textInputStyle2: {
+    height: 38,
+    width: width * 0.7,
+    backgroundColor: 'white',
+    marginBottom: 1,
+    paddingLeft: 10,
+    textAlign: 'left',
+  },
+});
+export default LoginView;

component/Map/recmd1.js

@@ -9,6 +9,8 @@ import {StackNavigator} from 'react-navigation';
 import Recmd2 from './recmd2';
 import navigation from '../Navigation';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import LoginView from './loginView';
+import Home from "./Home";
 class Recmd1 extends Component {
   constructor() {
     super();
@@ -170,9 +172,21 @@ const Stack = createNativeStackNavigator();
 
 function Recmdstack() {
   return (
-    <Stack.Navigator
-      initialRouteName="Recmd1"
-     >
+    <Stack.Navigator initialRouteName="LoginView">
+      <Stack.Screen
+        name="LoginView"
+        component={LoginView}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name="Recmd1"
         component={Recmd1}

package-lock.json

@@ -8661,6 +8661,11 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-common-date-picker": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmmirror.com/react-native-common-date-picker/-/react-native-common-date-picker-2.3.7.tgz",
+      "integrity": "sha512-XAell1MdBDjOkmHl6PxkNRstUvdrQmj36tu2zgTPR/EA3Db0Sr/LhwO+pdcA3XlJ7bPWt89tNantM16obzBz6Q=="
+    },
     "react-native-drawer": {
       "version": "2.5.1",
       "resolved": "https://registry.npmmirror.com/react-native-drawer/-/react-native-drawer-2.5.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "react": "17.0.2",
     "react-native": "0.68.1",
     "react-native-amap3d": "^3.0.7",
+    "react-native-common-date-picker": "^2.3.7",
     "react-native-drawer": "^2.5.1",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "^2.4.1",