先提交一版

App.tsx

@@ -18,15 +18,18 @@ import NavHeader from './src/components/NavHeader';
 import Login from './src/components/Login';
 import Reset from './src/components/Reset';
 
-// 业务逻辑组件 [首页]
-import HomeIndex from './src/home/Index';
+// // 业务逻辑组件 [首页]
+// import HomeIndex from './src/home/Index';
 
-// 业务逻辑组件 [班级]
-import CourseIndex from './src/course/Index';
-import Comment from './src/course/Comment';
+// // 业务逻辑组件 [班级]
+// import CourseIndex from './src/course/Index';
+// import Comment from './src/course/Comment';
 
-// 业务逻辑组件 [我的]
-import MineIndex from './src/mine/Index';
+// // 业务逻辑组件 [我的]
+// import MineIndex from './src/mine/Index';
+
+// 改版首页
+import HomeIndex from './src/home202201/Index';
 
 // 业务逻辑组件 [直播]
 import LiveIndex from './src/live/Index';
@@ -186,7 +189,7 @@ export default class App extends Component {
       // Orientation.lockToLandscape();
     // setTimeout(this.getMemberInfo, 2000);
     IdleTimerManager.setIdleTimerDisabled(true);
-    this.checkUserInfo();
+    // this.checkUserInfo();
       DeviceEventEmitter.addListener('showLogin', (data) => {
           this.setState(data);
       })
@@ -274,18 +277,20 @@ export default class App extends Component {
   render () {
     return (
         <SafeAreaProvider>
-          <StatusBar
-              translucent={true}
-              backgroundColor={"rgba(0,0,0,0)"}
-          />
+          <StatusBar backgroundColor='rgba(0,0,0,0)' translucent={true}  hidden={true}/>
           <NavigationContainer theme={customTheme} ref={(navigationRef) => {
             this.navigationRef = navigationRef;
           }}>
             <Root.Navigator mode="modal" initialRouteName="Main">
-              <Root.Screen
+              {/* <Root.Screen
                   name="Main"
                   component={MainStack}
                   options={{ headerShown: false }}
+              /> */}
+              <Root.Screen
+                  name="HomeIndex"
+                  component={HomeIndex}
+                  options={{ headerShown: false }}
               />
               <Root.Screen
                   name="Login"

Constants.js

@@ -5,16 +5,27 @@ const designWidth = 1024;
 const screenWidth = Dimensions.get('window').height;
 const screenHeight = Dimensions.get('window').width;
 const unitWidth = screenHeight / designWidth;
-
+import {
+  StyleSheet as RnStyleSheet,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+} from 'react-native';
+type StyleProps = Partial<ViewStyle | TextStyle | ImageStyle>;
+const StyleSheet = {
+  create(styles: {[className: string]: StyleProps}) {
+    return RnStyleSheet.create(styles);
+  },
+};
+console.log(screenWidth, screenHeight, unitWidth, 'unitWidth');
 export default {
   // apiPath: 'http://121.36.221.250:3001/mock/11',
   apiPath: 'http://education-tst.sinocanada.cn',
   imgPath: '',
-
+  StyleSheet,
   token: '',
   numOfPage: 10,
   baseFontSize: 15,
-
   width: screenWidth,
   height: screenHeight,
   unitWidth: unitWidth,
@@ -49,7 +60,7 @@ export default {
   readData: async (key) => {
     try {
       return await AsyncStorage.getItem(key);
-        } catch(e) {
+    } catch (e) {
       // error reading value
     }
   },
@@ -62,12 +73,13 @@ export default {
   },
 
   getParam: function (json) {
-        if (!json) return ''
-        return cleanArray(Object.keys(json).map(key => {
-            if (json[key] === undefined) return ''
-            return encodeURIComponent(key) + '=' +
-                encodeURIComponent(json[key])
-        })).join('&')
+    if (!json) return '';
+    return cleanArray(
+      Object.keys(json).map((key) => {
+        if (json[key] === undefined) return '';
+        return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
+      }),
+    ).join('&');
   },
   get: function (request) {
     let url = request.host;
@@ -79,10 +91,10 @@ export default {
     url += '?' + params.join('&');
     // console.log(url, request);
     return fetch(url, {
-            mode: "cors",
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
       },
     });
   },
@@ -96,11 +108,11 @@ export default {
     url += '?' + params.join('&');
     // console.log(url, request);
     return fetch(url, {
-            mode: "cors",
+      mode: 'cors',
       credentials: 'include',
-            method:'GET',
+      method: 'GET',
       headers: {
-                'token': this.token,
+        token: this.token,
       },
     });
   },
@@ -108,8 +120,8 @@ export default {
     let url = request.host;
     let data = request.params;
     return fetch(url, {
-            method:'POST',
-            mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       credentials: 'include',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
@@ -121,12 +133,12 @@ export default {
     let url = request.host;
     let data = request.params;
     return fetch(url, {
-            method:'POST',
-            mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
-                'apptype': "ipad"
+        apptype: 'ipad',
       },
       body: JSON.stringify(data),
     });
@@ -135,12 +147,12 @@ export default {
     let url = request.host;
     let data = request.params;
     return fetch(url, {
-            method:'PUT',
-            mode: "cors",
+      method: 'PUT',
+      mode: 'cors',
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
-                'apptype': "ipad"
+        apptype: 'ipad',
       },
       body: JSON.stringify(data),
     });
@@ -150,11 +162,11 @@ export default {
     let data = request.params;
     // console.log(url, this.token, data);
     return fetch(url, {
-            method:'POST',
-            mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
       },
       body: this.getParam(data),
     });
@@ -163,11 +175,11 @@ export default {
     let url = request.host;
     let data = request.params;
     return fetch(url, {
-            method:'POST',
-            mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
@@ -178,11 +190,11 @@ export default {
     let data = request.params;
     console.log(url, this.token, data);
     return fetch(url, {
-            method:'PUT',
-            mode: "cors",
+      method: 'PUT',
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
@@ -193,11 +205,11 @@ export default {
     let data = request.params;
     console.log(url, this.token, data, JSON.stringify(data));
     return fetch(url, {
-            method:'PATCH',
-            mode: "cors",
+      method: 'PATCH',
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
@@ -207,11 +219,11 @@ export default {
     let url = request.host;
     let data = request.params;
     return fetch(url, {
-            method:'delete',
-            mode: "cors",
+      method: 'delete',
+      mode: 'cors',
       credentials: 'include',
       headers: {
-                'token': this.token,
+        token: this.token,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
@@ -220,32 +232,38 @@ export default {
   uploadFile: function (request) {
     let url = request.host;
     let formData = new FormData();
-        let file = {uri: request.params.file, type: 'multipart/form-data', name: 'jpg'};
-        formData.append("files", file);
+    let file = {
+      uri: request.params.file,
+      type: 'multipart/form-data',
+      name: 'jpg',
+    };
+    formData.append('files', file);
     if (request.params.params) {
-            formData.append("params", request.params.params);
+      formData.append('params', request.params.params);
     }
     // console.log(formData);
     return fetch(url, {
-            method:'POST',
-            mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       credentials: 'include',
-            headers:{
-                'token': this.token,
-                'Content-Type':'multipart/form-data',
+      headers: {
+        token: this.token,
+        'Content-Type': 'multipart/form-data',
       },
       body: formData,
     });
-    }
-}
+  },
+};
 /**
  * 判断是否为iphoneX
  * @returns {boolean}
  */
 export function isIphoneX() {
-    return Platform.OS === 'ios' && (
-            (screenHeight == 812 && screenWidth == 375)
-        || (screenHeight == 896 && screenWidth == 414))
+  return (
+    Platform.OS === 'ios' &&
+    ((screenHeight == 812 && screenWidth == 375) ||
+      (screenHeight == 896 && screenWidth == 414))
+  );
 }
 
 //状态栏的高度
@@ -258,11 +276,11 @@ export function getStatusBarHeight() {
 }
 
 export function cleanArray(actual) {
-    const newArray = []
+  const newArray = [];
   for (let i = 0; i < actual.length; i++) {
     if (actual[i]) {
-            newArray.push(actual[i])
+      newArray.push(actual[i]);
     }
   }
-    return newArray
+  return newArray;
 }

package.json

@@ -18,6 +18,7 @@
     "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.2",
+    "@types/react-native": "^0.66.11",
     "agora-react-native-rtm": "1.2.2-alpha.3",
     "events": "^3.2.0",
     "react": "16.13.1",

src/home202201/home.css.ts

+
+import {
+  StyleSheet 
+
+} from 'react-native';
+import Constants from '../../Constants';
+
+let HomeCSS = StyleSheet.create({
+  warp: {
+    "width": '100%',
+    "height": '100%',
+  },
+  containerImg: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    height: null,
+    width: null,
+    zIndex: -1
+  },
+  container: {
+    "width": '100%',
+    "height": '100%',
+    // position: 'absolute',
+    // zIndex:2,
+    'display':'flex',
+    "paddingLeft": Constants.unitWidth * 50,
+    "paddingRight": Constants.unitWidth * 50
+  },
+  top: {
+    "height": 100,
+    // "backgroundColor":'red',
+    "width": '100%',
+    "display":'flex',
+    "justifyContent":'space-between',
+    "flexDirection":'row',
+    "alignItems":'center',
+  },
+  topLeft:{
+    "display":'flex',
+    "justifyContent":'space-between',
+    "flexDirection":'row',
+    "alignItems":'center',
+  },
+  topLeftIcon:{
+    'width':Constants.unitWidth * 48,
+    'height':Constants.unitWidth * 48,
+  },
+  topLeftName:{
+    'width':Constants.unitWidth * 140,
+    'height':Constants.unitWidth * 52,
+    "paddingLeft": Constants.unitWidth * 18,
+    "paddingRight": Constants.unitWidth * 18,
+    'color':'#fff'
+  },
+  topLeftSelClass:{
+    'width':Constants.unitWidth * 118,
+    'height':Constants.unitWidth * 40,
+    'borderRadius':20,
+    'backgroundColor':'#FFEFD8',
+    "display":'flex',
+    "justifyContent":'center',
+    "flexDirection":'row',
+    "alignItems":'center',
+  },
+  topRight:{
+    "width":128,
+    "height":40,
+  },
+  mainView:{
+    display:'flex',
+    height:Constants.width - 100,
+    width:'100%',
+  },
+  mainViewTop:{
+    flex:1,
+    
+  },
+  mainViewBtm:{
+    flex:1,
+  },
+  mainViewTopBtmView:{
+    'width':'100%',
+    "display":'flex',
+    "justifyContent":'space-between',
+    "flexDirection":'row',
+    "alignItems":'center',
+  },
+  mainViewTopBtmListView:{
+    flex:0.31,
+    height:'100%',
+    "backgroundColor":'#FFEFD8',
+    'borderRadius':15,
+    display:'flex',
+    "justifyContent":'center',
+    "alignItems":'center',
+  },
+  ListViewImg:{
+    "width":85 * Constants.unitWidth,
+    "height":85 * Constants.unitWidth,
+    "marginBottom": 18
+  },
+  ListViewText:{
+    fontSize: 16 * Constants.unitWidth,
+    color: '#C44706',
+  }
+  
+});
+
+module.exports = HomeCSS;

yarn.lock

@@ -1569,6 +1569,32 @@
   resolved "https://registry.npm.taobao.org/@types/prettier/download/@types/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
   integrity sha1-M1CYSfjmeeSt0ViVn9sIZEDpVT8=
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.npmmirror.com/@types/prop-types/download/@types/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha1-/PcgXCXf95Xuea8eMNosl5CAjxE=
+
+"@types/react-native@^0.66.11":
+  version "0.66.11"
+  resolved "https://registry.npmmirror.com/@types/react-native/download/@types/react-native-0.66.11.tgz#3d138275fe9cca3b8efad990b1bee08078c3ff4d"
+  integrity sha512-DFuNMhRuyKMbJrI/s3rIuM5io+tIOK4Iq9oMzatWX5bIgfjZM86X1aA/epE0ipw1aFaoHKermK3fLG1bqFzzDQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.38"
+  resolved "https://registry.npmmirror.com/@types/react/download/@types/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmmirror.com/@types/scheduler/download/@types/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha1-GmL4lSVyPd4kuhsBsJK/XfitTTk=
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/@types/stack-utils/download/@types/stack-utils-1.0.1.tgz?cache=0&sync_timestamp=1605057912895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fstack-utils%2Fdownload%2F%40types%2Fstack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -2535,6 +2561,11 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.npmmirror.com/csstype/download/csstype-3.0.10.tgz?cache=0&sync_timestamp=1637224514674&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcsstype%2Fdownload%2Fcsstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"