Browse Source

1.修改播放器时间字体大小
2.修改个人信息字体大小
3.修改课程表item字体大小
4.修改分享框样式

zhangmengjie 5 years ago
parent
commit
114d2aa479

+ 1 - 1
pages/components/CusVideo.js

@@ -590,7 +590,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   player_time: {
-    fontSize: 18,
+    fontSize: 16,
     color: "white",
     alignItems: "center",
     justifyContent: "center",

+ 67 - 59
pages/components/GradeSelectionModal.js

@@ -32,6 +32,9 @@ type Props = {};
 export default class GradeSelectionModal extends Component<Props> {
   state = {
     modalVisible: false,
+    click_index: this.props.grade_index,
+    item_width: 0,
+    item_height: 0,
     grade_data: [
       "一年级",
       "二年级",
@@ -151,72 +154,79 @@ export default class GradeSelectionModal extends Component<Props> {
         style={{
           flex: 1,
           flexDirection: "column",
-          alignItems: "center"
+          alignItems: "center",
+          justifyContent: "center"
         }}
       >
         <View
           style={{
             flex: 1,
-            justifyContent: "space-between",
+            justifyContent: "space-evenly",
             width: "90%",
-            flexDirection: "row"
-          }}
-        >
-          <TouchableOpacity
-            onPress={() => this.clickGrade()}
-            style={styles.item}
-          >
-            <Text style={styles.item_text}>一年级</Text>
-          </TouchableOpacity>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>二年级</Text>
-          </View>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>三年级</Text>
-          </View>
-        </View>
-        <View
-          style={{
-            flex: 1,
-            justifyContent: "space-between",
-            width: "90%",
-            flexDirection: "row"
+            flexDirection: "row",
+            //换行显示
+            flexWrap: "wrap",
+            alignItems: "center"
           }}
+          onLayout={event => this.onLayout(event)}
         >
-          <View style={styles.item}>
-            <Text style={styles.item_text}>四年级</Text>
-          </View>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>五年级</Text>
-          </View>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>六年级</Text>
-          </View>
+          {this.centerItem()}
         </View>
-        <View
+      </View>
+    );
+  }
+  onLayout(event) {
+    // alert(event.nativeEvent.layout.width);
+    // alert(event.nativeEvent.layout.width / 3);
+    this.setState({
+      item_width: event.nativeEvent.layout.width / 3.5,
+      item_height: event.nativeEvent.layout.height / 3
+    });
+  }
+  centerItem() {
+    let arr = [];
+    for (let i = 0; i < this.state.grade_data.length; i++) {
+      let index = i;
+      let color = "";
+      if (this.state.click_index == i) {
+        color = "rgba(88, 168, 250, 1)";
+      } else {
+        color = "rgba(61, 192, 252, 0.15)";
+      }
+      arr[i] = (
+        <TouchableOpacity
+          activeOpacity={1}
+          key={i}
           style={{
-            flex: 1,
-            justifyContent: "space-between",
-            width: "90%",
-            flexDirection: "row"
+            margin: 1,
+            height: this.state.item_height,
+            alignItems: "center",
+            justifyContent: "center"
           }}
+          onPress={() => this.clickGrade(index)}
         >
-          <View style={styles.item}>
-            <Text style={styles.item_text}>七年级</Text>
-          </View>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>八年级</Text>
-          </View>
-          <View style={styles.item}>
-            <Text style={styles.item_text}>九年级</Text>
+          <View
+            style={{
+              width: this.state.item_width,
+              height: this.state.item_height / 2,
+              backgroundColor: color,
+              borderRadius: 20
+            }}
+          >
+            <Text style={styles.item_text}>{this.state.grade_data[i]}</Text>
           </View>
-        </View>
-      </View>
-    );
-  }
+        </TouchableOpacity>
+      );
+    }
 
+    return arr;
+  }
   commit() {
-    alert("确定");
+    this.props.commitGrade(
+      this.state.grade_data[this.state.click_index],
+      this.state.click_index
+    );
+    this.setModalVisible(false);
   }
 
   setModalVisible(visible) {
@@ -224,20 +234,18 @@ export default class GradeSelectionModal extends Component<Props> {
       modalVisible: visible
     });
   }
-  clickGrade() {}
+  clickGrade(index) {
+    this.setState({
+      click_index: index
+    });
+  }
 }
 const styles = StyleSheet.create({
-  item: {
-    width: 127,
-    height: 53,
-    backgroundColor: "rgba(61, 192, 252, 0.15)",
-    borderRadius: 30
-  },
   item_text: {
     flex: 1,
     textAlign: "center",
     textAlignVertical: "center",
     color: "rgba(58, 58, 58, 1)",
-    fontSize: 18
+    fontSize: 16
   }
 });

+ 14 - 5
pages/components/PersonalInfo.js

@@ -35,7 +35,9 @@ export default class PersonalInfo extends BasePage {
   state = {
     nickName: "初始昵称",
     schoolName: "未设置",
-    cisys: "北京市"
+    cisys: "北京市",
+    grade_text: "七年级",
+    grade_index: 6
   };
   updateState(data) {
     this.setState(data);
@@ -54,7 +56,8 @@ export default class PersonalInfo extends BasePage {
         />
         <GradeSelectionModal
           ref={view => (this.gradeselectionModal = view)}
-          cityscommit={this.cityscommit.bind(this)}
+          commitGrade={this.commitGrade.bind(this)}
+          grade_index={this.state.grade_index}
         />
         <StatusBar backgroundColor={"transparent"} translucent={true} />
 
@@ -431,7 +434,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      年级。。。
+                      {this.state.grade_text}
                     </Text>
                   </View>
                   <View
@@ -611,6 +614,12 @@ export default class PersonalInfo extends BasePage {
       cisys: provinces_name + citys_name
     });
   }
+  commitGrade(text, index) {
+    this.setState({
+      grade_text: text,
+      grade_index: index
+    });
+  }
 }
 
 const styles = StyleSheet.create({
@@ -622,9 +631,9 @@ const styles = StyleSheet.create({
     marginTop: 1
   },
   item_text: {
-    flex: 2,
+    flex: 3,
     textAlignVertical: "center",
     color: "black",
-    fontSize: 20
+    fontSize: 16
   }
 });

+ 2 - 2
pages/components/ScheduleFlatItem.js

@@ -50,7 +50,7 @@ export default class ScheduleFlatItem extends Component<Props> {
               style={{
                 flex: 2.5,
                 backgroundColor: this.props.data.typecolor,
-                width: "95%",
+                width: "100%",
                 height: "70%",
                 alignItems: "center",
                 justifyContent: "center",
@@ -59,7 +59,7 @@ export default class ScheduleFlatItem extends Component<Props> {
             >
               <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
             </View>
-            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 0.2 }} />
             <View
               style={{
                 flex: 10,

+ 4 - 2
pages/components/SharedDialog.js

@@ -138,6 +138,7 @@ export default class SharedDialog extends Component<Props> {
                 flex: 2,
                 backgroundColor: "white",
                 flexDirection: "row",
+                justifyContent: "center",
                 width: "100%"
               }}
             >
@@ -168,7 +169,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >
@@ -177,6 +178,7 @@ export default class SharedDialog extends Component<Props> {
                   </View>
                 </TouchableOpacity>
               </View>
+              <View style={{ flex: 0.3 }} />
               <View
                 style={{
                   flex: 1
@@ -203,7 +205,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >