330_悬浮按钮的切换功能

component/HoverButton/index.js

@@ -17,6 +17,10 @@ class HoverButton extends Component {
             source={require('../../images/Data/菜单.png')}
           />
         )}
+        onLongPress={() => {
+          this.props.changeSelectedTab('个人信息');
+          console.log('个人信息');
+        }}
         hideShadow={true}
         buttonColor="rgba(255,255,255,0)"
         position="right"
@@ -24,7 +28,10 @@ class HoverButton extends Component {
         <ActionButton.Item
           buttonColor="rgba(255,255,255,0)"
           // title="排行榜"
-          onPress={() => console.log('排行榜')}>
+          onPress={() => {
+            this.props.changeSelectedTab('排行榜');
+            console.log('排行榜');
+          }}>
           <Image
             style={styles.image}
             source={require('../../images/Data/排行榜.png')}
@@ -34,7 +41,10 @@ class HoverButton extends Component {
         <ActionButton.Item
           buttonColor="rgba(255,255,255,0)"
           // title="我的成就"
-          onPress={() => console.log('成就')}>
+          onPress={() => {
+            this.props.changeSelectedTab('我的成就');
+            console.log('我的成就');
+          }}>
           <Image
             style={styles.image}
             source={require('../../images/Data/成就.png')}
@@ -44,7 +54,10 @@ class HoverButton extends Component {
         <ActionButton.Item
           buttonColor="rgba(255,255,255,0)"
           // title="数据分析"
-          onPress={() => console.log('数据分析')}>
+          onPress={() => {
+            this.props.changeSelectedTab('数据分析');
+            console.log('数据分析');
+          }}>
           <Image
             style={styles.image}
             source={require('../../images/Data/数据分析.png')}
@@ -54,7 +67,10 @@ class HoverButton extends Component {
         <ActionButton.Item
           buttonColor="rgba(255,255,255,0)"
           // title="自习概览"
-          onPress={() => console.log('自习概览')}>
+          onPress={() => {
+            this.props.changeSelectedTab('自习概览');
+            console.log('自习概览');
+          }}>
           <Image
             style={styles.image}
             source={require('../../images/Data/自习概览.png')}

component/Mine/Data/Achievement/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+class Achievement extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          display: this.props.show ? 'flex' : 'none',
+          backgroundColor: '#F2E2CE',
+          flex: 1,
+        }}>
+        <Text style={styles.text}>成就模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Achievement;

component/Mine/Data/Analysis/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+class Analysis extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          display: this.props.show ? 'flex' : 'none',
+          backgroundColor: '#F2E2CE',
+          flex: 1,
+        }}>
+        <Text style={styles.text}>数据分析模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Analysis;

component/Mine/Data/Outline/index.js

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

component/Mine/Data/Rank/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+class Rank extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          display: this.props.show ? 'flex' : 'none',
+          backgroundColor: '#F2E2CE',
+          flex: 1,
+        }}>
+        <Text style={styles.text}>排行榜模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default Rank;

component/Mine/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Image} from 'react-native';
 import HoverButton from '../HoverButton';
+import Person from './person';
+import Achievement from './Data/Achievement';
+import Analysis from './Data/Analysis';
+import Outline from './Data/Outline';
+import Rank from './Data/Rank';
 
 class Mine extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+    this.state = {
+      showPerson: true,
+      showAchievement: false,
+      showOutline: false,
+      showAnalysis: false,
+      showRank: false,
+    };
+    this.changeSelectedTab = this.changeSelectedTab.bind(this);
+  }
+
+  changeSelectedTab(selectedTab) {
+    if (this.state.showPerson === true) {
+      this.setState({
+        showPerson: false,
+      });
+    }
+    if (this.state.showAchievement === true) {
+      this.setState({
+        showAchievement: false,
+      });
+    }
+    if (this.state.showOutline === true) {
+      this.setState({
+        showOutline: false,
+      });
+    }
+    if (this.state.showAnalysis === true) {
+      this.setState({
+        showAnalysis: false,
+      });
+    }
+    if (this.state.showRank === true) {
+      this.setState({
+        showRank: false,
+      });
+    }
+    switch (selectedTab) {
+      case '排行榜':
+        this.setState({
+          showRank: true,
+        });
+        break;
+      case '我的成就':
+        this.setState({
+          showAchievement: true,
+        });
+        break;
+      case '数据分析':
+        this.setState({
+          showAnalysis: true,
+        });
+        break;
+      case '自习概览':
+        this.setState({
+          showOutline: true,
+        });
+        break;
+      case '个人信息':
+        this.setState({
+          showPerson: true,
+        });
+        break;
+    }
+
+    this.setState({
+      selectedTab: selectedTab,
+    });
   }
 
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.text}>Mine个人主页模块</Text>
-        <HoverButton />
+        <Person show={this.state.showPerson} />
+        <Achievement show={this.state.showAchievement} />
+        <Outline show={this.state.showOutline} />
+        <Analysis show={this.state.showAnalysis} />
+        <Rank show={this.state.showRank} />
+
+        <HoverButton changeSelectedTab={this.changeSelectedTab} />
+
       </View>
     );
   }
@@ -19,7 +97,6 @@ class Mine extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',
-
     flex: 1,
   },
   text: {

component/Mine/person.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+class person extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          display: this.props.show ? 'flex' : 'none',
+          backgroundColor: '#F2E2CE',
+          flex: 1,
+        }}>
+        <Text style={styles.text}>个人信息模块</Text>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#ffa3a3',
+    flex: 1,
+  },
+  text: {
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default person;

component/Navigation/index.js

@@ -88,14 +88,13 @@ class Navigation extends Component {
             this.setState({selectedTab: '我'});
             this.props.changeName('我');
           }}>
-          <Mine />
+          <Mine changeName={this.props.changeName} />
         </TabNavigator.Item>
       </TabNavigator>
     );
   }
 }
 
-
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#F2E2CE',