304_addOnlineStudy

component/Map/index.js

@@ -17,7 +17,7 @@ class Map extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   text: {

component/Mine/index.js

@@ -17,7 +17,7 @@ class Mine extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   text: {

component/Navigation/index.js

@@ -64,7 +64,7 @@ class Navigation extends Component {
             this.setState({selectedTab: '自习'});
             this.props.changeName('自习');
           }}>
-          <Study />
+          <Study navi={this.props.navi} />
         </TabNavigator.Item>
 
         <TabNavigator.Item
@@ -97,7 +97,7 @@ class Navigation extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   icon: {

component/OnlineStudy/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {NavigationContainer} from '@react-navigation/native';
+import OnlineStudyHome from '../OnlineStudyHome';
+
+const {width, height} = Dimensions.get('window');
+
+class OnlineStudy extends Component {
+  constructor() {
+    super();
+  }
+
+  onlineMode = event => {
+    alert('is pressed');
+    this.props.navigation.navigate('OnlineStudy');
+  };
+
+  render() {
+    const Stack = createNativeStackNavigator();
+
+    return (
+      <NavigationContainer independent={true}>
+        <Stack.Navigator
+          screenOptions={{
+            headerTintColor: '#592202',
+            headerStyle: {
+              backgroundColor: '#CE9561',
+            },
+            headerTitleStyle: {
+              color: '#592202',
+              fontSize: 20,
+              fontWeight: 'bold',
+            },
+          }}>
+          <Stack.Screen name="联网自习" component={OnlineStudyHome} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    );
+  }
+}
+
+export default OnlineStudy;

component/OnlineStudyHome/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
+
+const {width, height} = Dimensions.get('window');
+
+class OnlineStudyHome extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Image source={require('./img/scene1.png')} style={styles.image} />
+        <Image source={require('./img/scene2.png')} style={styles.image} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  buttonStyle: {
+    backgroundColor: '#BF7636',
+    borderRadius: 3,
+  },
+  button_containerStyle: {
+    width: parseInt(width) / 2,
+    marginHorizontal: parseInt(width) / 4,
+    marginVertical: parseInt(width) / 4,
+  },
+  image: {
+    width: null,
+    height: null,
+    flex: 1,
+  },
+});
+
+export default OnlineStudyHome;

component/Study/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {Button} from 'react-native-elements';
+
+const {width, height} = Dimensions.get('window');
 
 class Study extends Component {
   constructor() {
     super();
   }
 
+  onlineMode = () => {
+    this.props.navi.navigate('OnlineStudy');
+  };
+
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.text}>Study自习模块</Text>
+        <Button
+          buttonStyle={styles.buttonStyle}
+          containerStyle={styles.button_containerStyle}
+          title="button"
+          onPress={this.onlineMode}
+        />
       </View>
     );
   }
 }
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   text: {
@@ -25,6 +39,15 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
+  buttonStyle: {
+    backgroundColor: '#BF7636',
+    borderRadius: 3,
+  },
+  button_containerStyle: {
+    width: parseInt(width) / 2,
+    marginHorizontal: parseInt(width) / 4,
+    marginVertical: parseInt(width) / 4,
+  },
 });
 
 export default Study;

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@ant-design/react-native": "^5.0.0",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "axios": "^0.26.1",

page/App.js

@@ -3,6 +3,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Home from './Home/index';
 import Login from './Login';
+import OnlineStudy from '../component/OnlineStudy';
 
 //入口
 const App: () => Node = () => {
@@ -16,6 +17,7 @@ const App: () => Node = () => {
         }}>
         <Stack.Screen name="LoginPage" component={Login} />
         <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="OnlineStudy" component={OnlineStudy} />
       </Stack.Navigator>
     </NavigationContainer>
   );

page/Home/index.js

@@ -3,6 +3,7 @@ import {View, Text, StatusBar, StyleSheet} from 'react-native';
 import MyHeader from '../../component/Header';
 import Navigation from '../../component/Navigation';
 import {getTest} from '../../api/test';
+import { Button } from "react-native-elements";
 class Home extends Component {
   constructor(props) {
     super(props);
@@ -33,7 +34,7 @@ class Home extends Component {
     return (
       <View style={styles.container}>
         <MyHeader title={this.state.name} />
-        <Navigation changeName={this.changeName} />
+        <Navigation navi={this.props.navigation} changeName={this.changeName} />
       </View>
     );
   }
@@ -41,7 +42,7 @@ class Home extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   text: {

page/Login/index.js

@@ -40,7 +40,7 @@ class Login extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F4CB8C',
-    opacity: 0.5,
+    //opacity: 0.5,
     flex: 1,
   },
   text: {