304_addOnlineStudyHome

component/2-PlayerPKHome/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {Button} from 'react-native-elements';
+
+const {width, height} = Dimensions.get('window');
+
+class TwoPlayerPKHome extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Study自习模块</Text>
+        <Button
+          buttonStyle={styles.buttonStyle}
+          containerStyle={styles.button_containerStyle}
+          title="button"
+        />
+      </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,
+  },
+});
+
+export default TwoPlayerPKHome;

component/OnlineStudy/index.js

@@ -3,6 +3,7 @@ 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';
+import TwoPlayerPKHome from '../2-PlayerPKHome';
 
 const {width, height} = Dimensions.get('window');
 
@@ -11,11 +12,6 @@ class OnlineStudy extends Component {
     super();
   }
 
-  onlineMode = event => {
-    alert('is pressed');
-    this.props.navigation.navigate('OnlineStudy');
-  };
-
   render() {
     const Stack = createNativeStackNavigator();
 
@@ -34,6 +30,7 @@ class OnlineStudy extends Component {
             },
           }}>
           <Stack.Screen name="联网自习" component={OnlineStudyHome} />
+          <Stack.Screen name="双人PK" component={TwoPlayerPKHome} />
         </Stack.Navigator>
       </NavigationContainer>
     );

component/OnlineStudyHome/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  Image,
+  TouchableHighlight,
+  Pressable,
+} from 'react-native';
 
 const {width, height} = Dimensions.get('window');
 
@@ -8,11 +16,31 @@ class OnlineStudyHome extends Component {
     super();
   }
 
+  twoPlayerPK = () => {
+    this.props.navigation.navigate('双人PK');
+  };
+
   render() {
     return (
       <View style={styles.container}>
-        <Image source={require('./img/scene1.png')} style={styles.image} />
-        <Image source={require('./img/scene2.png')} style={styles.image} />
+        <Pressable
+          android_ripple={{
+            color: '#BF7636',
+            foreground: true,
+          }}
+          onPress={this.twoPlayerPK}
+          style={styles.button}>
+          <Image source={require('./img/scene1.png')} style={styles.image} />
+        </Pressable>
+        <Pressable
+          android_ripple={{
+            color: '#BF7636',
+            foreground: true,
+          }}
+          onPress={this.twoPlayerPK}
+          style={styles.button}>
+          <Image source={require('./img/scene2.png')} style={styles.image} />
+        </Pressable>
       </View>
     );
   }
@@ -29,14 +57,9 @@ 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,
+  button: {
+    flex: 0.5,
+    borderRadius: 50,
   },
   image: {
     width: null,