feat: 首页网络请求正常（Android和IOS）

.env

@@ -1 +1 @@
-API_URL=http://127.0.0.1:4523/m1/5106198-0-default
+API_URL=http://192.168.0.1:4523/m1/5106198-0-default

App.tsx

@@ -6,27 +6,79 @@
  */
 
 import React from 'react';
-import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, StatusBar, StyleSheet, Alert} from 'react-native';
+import RNExitApp from 'react-native-exit-app';
+import {
+  setJSExceptionHandler,
+  setNativeExceptionHandler,
+  getJSExceptionHandler,
+} from 'react-native-exception-handler';
 
 import store from '@/config/dva';
 
 import {Provider} from 'react-redux';
 import Navigator from '@/navigator/index';
 
-function App(): JSX.Element {
-  return (
-    <Provider store={store}>
-      <SafeAreaView style={styles.background}>
-        {/*设置安卓头部状态栏*/}
-        <StatusBar
-          backgroundColor="transparent"
-          barStyle="dark-content"
-          translucent
-        />
-        <Navigator />
-      </SafeAreaView>
-    </Provider>
-  );
+const customErrorHandler = (e: Error, isFatal: boolean) => {
+  if (isFatal) {
+    Alert.alert(
+      'Unexpected error occurred',
+      `
+        Error: ${isFatal ? 'Fatal:' : ''} ${e.name} ${e.message}
+
+        We have reported this to our team ! Please close the app and start again!
+        `,
+      [
+        {
+          text: 'Close',
+          // onPress: () => {
+          //   RNExitApp.exitApp();
+          // },
+        },
+      ],
+    );
+  } else {
+    console.log('get error'); // So that we can see it in the ADB logs in case of Android if needed
+    // Alert.alert('error occur', e.message);
+  }
+};
+const previousErrorHandler = getJSExceptionHandler(); // by default u will get the red screen error handler here
+const errorHandler = (e: Error, isFatal: boolean) => {
+  customErrorHandler(e, isFatal);
+  previousErrorHandler(e, isFatal);
+};
+// setJSExceptionHandler(errorHandler, true);
+//
+// setNativeExceptionHandler(errorString => {
+//   console.log('setNativeExceptionHandler', errorString);
+// });
+
+class App extends React.Component {
+  causeJSError = () => {
+    // throw new Error('THIS IS A CUSTOM UNHANDLED JS ERROR');
+  };
+
+  causeNativeError = () => {
+    // RnTestExceptionHandler.raiseTestNativeError();
+    console.log('native error');
+  };
+  render() {
+    // const isHermes = () => !!global.HermesInternal;
+    // console.log('isHermes', isHermes());
+    return (
+      <Provider store={store}>
+        <SafeAreaView style={styles.background}>
+          {/*设置安卓头部状态栏*/}
+          <StatusBar
+            backgroundColor="transparent"
+            barStyle="dark-content"
+            translucent
+          />
+          <Navigator />
+        </SafeAreaView>
+      </Provider>
+    );
+  }
 }
 
 const styles = StyleSheet.create({

android/app/build.gradle

@@ -149,6 +149,7 @@ android {
 }
 
 dependencies {
+//    compile project(':react-native-exception-handler')
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 
@@ -165,6 +166,7 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/src/main/java/com/listenbook/MainApplication.java

@@ -1,5 +1,6 @@
 package com.listenbook;
 
+//import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;
 import android.app.Application;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
@@ -25,6 +26,8 @@ protected List<ReactPackage> getPackages() {
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
+            //!Add react-native-exception-handler
+//            packages.add(new ReactNativeExceptionHandlerPackage());
           return packages;
         }
 

android/settings.gradle

@@ -1,4 +1,9 @@
 rootProject.name = 'listenbook'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
+//add react-native-exception-handler
+include ':react-native-exception-handler'
+project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-exception-handler/android')
+
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

index.js

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './src/index';
+import App from './App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

ios/Podfile.lock

@@ -426,6 +426,8 @@ PODS:
     - React-Core
   - RNCAsyncStorage (2.0.0):
     - React-Core
+  - RNExitApp (2.0.0):
+    - React-Core
   - RNGestureHandler (2.19.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -504,6 +506,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeExceptionHandler (from `../node_modules/react-native-exception-handler/ReactNativeExceptionHandler.podspec`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -604,6 +607,8 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native-exception-handler/ReactNativeExceptionHandler.podspec"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNExitApp:
+    :path: "../node_modules/react-native-exit-app"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
@@ -665,6 +670,7 @@ SPEC CHECKSUMS:
   ReactCommon: 6b451ad57a7859920ee0ec84163d3c42d933abd6
   ReactNativeExceptionHandler: b11ff67c78802b2f62eed0e10e75cb1ef7947c60
   RNCAsyncStorage: d35c79ffba52c1013013e16b1fc295aec2feabb6
+  RNExitApp: 00036cabe7bacbb413d276d5520bf74ba39afa6a
   RNGestureHandler: 7ad14a6c7b491add489246611d324f10009083ac
   RNScreens: 80369e822c4f123c3f076c9ea4141991c17770f9
   RNSVG: 02afa5e73ab68c706208d0c64d25da80c6c75d0b

ios/listenbook.xcodeproj/xcshareddata/xcschemes/listenbook.xcscheme

@@ -64,7 +64,7 @@
          <EnvironmentVariable
             key = "IDEPreferLogStreaming"
             value = "YES"
-            isEnabled = "YES">
+            isEnabled = "NO">
          </EnvironmentVariable>
       </EnvironmentVariables>
    </LaunchAction>

package.json

@@ -27,6 +27,7 @@
     "react-native": "0.71.18",
     "react-native-config": "^1.5.3",
     "react-native-exception-handler": "^2.10.10",
+    "react-native-exit-app": "^2.0.0",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-linear-animated-gradient-transition": "^0.1.6",
     "react-native-pager-view": "^6.4.1",

src/config/http.ts

@@ -1,11 +1,16 @@
 import Config from 'react-native-config';
 import axios from 'axios';
 
+const server = axios.create({
+  baseURL: 'http://192.168.1.8:4523/m1/5106198-0-default',
+  timeout: 10 * 1000,
+});
+
 //从环境文件读取接口基本路径
-axios.defaults.baseURL = 'http://localhost:4523/m1/5106198-0-default';
+// axios.defaults.baseURL = 'http://192.168.1.8:4523/m1/5106198-0-default';
 // axios.defaults.baseURL = Config.API_URL
 //添加请求拦截器
-axios.interceptors.request.use(
+server.interceptors.request.use(
   function (config) {
     //@ts-ignore
     config.headers = {
@@ -19,12 +24,14 @@ axios.interceptors.request.use(
 );
 
 //添加响应拦截器
-axios.interceptors.response.use(
+server.interceptors.response.use(
   function (response) {
     return response.data;
   },
   error => {
-    console.log(error.message);
+    // console.log(error.message);
     return Promise.reject(error);
   },
 );
+
+export default server;

src/models/home.ts

@@ -1,6 +1,6 @@
 import {Effect, Model} from 'dva-core-ts';
 import {Reducer} from 'redux';
-import axios from 'axios';
+import http from '@/config/http';
 import {RootState} from '@/models/index';
 
 //轮播图URL
@@ -96,60 +96,59 @@ const homeModel: HomeModel = {
   },
   effects: {
     *fetchCarousels(_, {call, put}) {
-      // console.log('request carousels');
+      console.log('request carousels');
       // // @ts-ignore
-      // const {data} = yield call(axios.get, CAROUSEL_URL);
-      // // console.log('轮播图', data);
-      // yield put({
-      //   type: 'setState',
-      //   payload: {
-      //     carousels: data,
-      //   },
-      // });
+      const {data} = yield call(http.get, CAROUSEL_URL);
+      yield put({
+        type: 'setState',
+        payload: {
+          carousels: data,
+        },
+      });
     },
     *fetchGuess(_, {call, put}) {
       console.log('request guess');
-      // const {data} = yield call(axios.get, GUESS_URL);
+      const {data} = yield call(http.get, GUESS_URL);
       // console.log('guess data', data);
-      // yield put({
-      //   type: 'setState',
-      //   payload: {
-      //     guess: data,
-      //   },
-      // });
+      yield put({
+        type: 'setState',
+        payload: {
+          guess: data,
+        },
+      });
     },
     *fetchChannels({callback, payload}, {call, put, select}) {
       console.log('request channels');
-      // const {channels, pagination} = yield select(
-      //   (state: RootState) => state.home,
-      // );
-      // let page = 1;
-      // if (payload && payload.loadMore) {
-      //   page = pagination.current + 1;
-      // }
-      // const {data} = yield call(axios.get, CHANNEL_URL, {
-      //   params: {
-      //     page: page,
-      //   },
-      // });
-      // let newChannels = data.results;
-      // if (payload && payload.loadMore) {
-      //   newChannels = channels.concat(newChannels);
-      // }
-      // yield put({
-      //   type: 'setState',
-      //   payload: {
-      //     channels: newChannels,
-      //     pagination: {
-      //       hasMore: newChannels.length < pagination.total,
-      //       total: data.pagination.total,
-      //       current: data.pagination.current,
-      //     },
-      //   },
-      // });
-      // if (typeof callback === 'function') {
-      //   callback();
-      // }
+      const {channels, pagination} = yield select(
+        (state: RootState) => state.home,
+      );
+      let page = 1;
+      if (payload && payload.loadMore) {
+        page = pagination.current + 1;
+      }
+      const {data} = yield call(http.get, CHANNEL_URL, {
+        params: {
+          page: page,
+        },
+      });
+      let newChannels = data.results;
+      if (payload && payload.loadMore) {
+        newChannels = channels.concat(newChannels);
+      }
+      yield put({
+        type: 'setState',
+        payload: {
+          channels: newChannels,
+          pagination: {
+            hasMore: newChannels.length < pagination.total,
+            total: data.pagination.total,
+            current: data.pagination.current,
+          },
+        },
+      });
+      if (typeof callback === 'function') {
+        callback();
+      }
     },
   },
 };

src/navigator/BottomTabs.tsx

@@ -84,6 +84,7 @@ const BottomTabs: React.FC<IProps> = props => {
         name="Listen"
         component={Listen}
         options={{
+          tabBarLabel: '我听',
           headerShown: false,
           tabBarIcon: ({color, size}) => (
             <Icon name="shoucang" color={color} size={size} />
@@ -94,6 +95,7 @@ const BottomTabs: React.FC<IProps> = props => {
         name="Found"
         component={Found}
         options={{
+          tabBarLabel: '发现',
           headerShown: false,
           tabBarIcon: ({color, size}) => (
             <Icon name="faxian" color={color} size={size} />
@@ -104,6 +106,7 @@ const BottomTabs: React.FC<IProps> = props => {
         name="Account"
         component={Account}
         options={{
+          tabBarLabel: '我的',
           headerShown: false,
           tabBarIcon: ({color, size}) => (
             <Icon name="user" color={color} size={size} />