fix

src/components/TopNavBar/index.tsx

@@ -107,7 +107,7 @@ function CustomNavbar(WrappedComponent, props: Props) {
             const { indexStore: { navBarTop }, bookStore } = this.props.store
             let stateIndex = bookStore.workDirection
             return <View style={{ height: navBar + navBarTop + 5 }}>
-                <View className='navbarWrap' style={{ paddingTop: navBarTop + 5, height: navBar, backgroundColor: isReloadBook ? bookStore.bookConfig?.off_on ? "#FFF" : "#000" : "#FFF" }}>
+                <View className='navbarWrap' style={{ paddingTop: navBarTop + 5, height: navBar, backgroundColor: isReloadBook ? bookStore.bookConfig?.off_on ? "#FFF" : "#363738" : "#FFF" }}>
                     <View className='content'>
                         {
                             tab ? <View className="navbar">

src/pages/book/BookArticle/index.tsx

@@ -1,11 +1,11 @@
 
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { View, Text, ScrollView, Button } from '@tarojs/components';
 import { observer, inject } from 'mobx-react';
 import './index.less';
 import TopNavBar from '@src/components/TopNavBar/index';
-import Taro from '@tarojs/taro';
+import Taro, { useDidHide } from '@tarojs/taro';
 import BookConfigPuP from '@src/components/bookConfigPup';
 import { BookStore } from '@src/store/book';
 import useApi from '@src/Hook/useApi';
@@ -37,6 +37,8 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
     const [pup, setPup] = useState(false);
     const { getBookContent } = useApi(appInfoStore)
     const [currentScrollId, setCurrentScrollId] = useState('');
+    const newReadLogIdRef = useRef("");
+    // 页面显示的操作请求
     useEffect(() => {
         // ComponentDidMount
         try {
@@ -54,19 +56,23 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
         }
         //假如存在阅读记录获取对应章节的条数
         let readLogId = getReadLog(openBookData?.bookId)
-        getBookContent({ pageNum: 1, pageSize:readLogId? Number(readLogId?.split('-')[1]) : 2 }).then(res => {
+        getBookContent({ pageNum: 1, pageSize: readLogId ? Number(readLogId?.split('-')[1]) : 2 }).then(res => {
             //继续阅读时跳转到上次阅读的段落
-            console.log(readLogId)
+            console.log("上次阅读到readLogId", readLogId)
             setCurrentScrollId(readLogId)
         })
+    }, []);
+    // 页面卸载的操作
+    useEffect(() => {
         return () => {
-            console.log("卸载");
+            console.log("卸载", newReadLogIdRef.current);
             reportRead(); // 上报
         };
-    }, []);
-
+    }, [])
+    // 这里可以填写上报逻辑
     const reportRead = () => {
-        // 这里可以填写上报逻辑
+        console.log("上报", newReadLogIdRef.current)
+        openBookData && setReadLog({ [openBookData.bookId]: newReadLogIdRef.current })
     };
     //设置配置
     const setConfig = (data: Config) => {
@@ -158,7 +164,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
             for (let item of items) {
                 if (item.top <= scrollTop && item.bottom >= scrollTop) {
                     if (openBookData?.bookId) {
-                        setReadLog({ [openBookData.bookId]: item.id })
+                        newReadLogIdRef.current = item.id//存放当前可视的段落ID
                     }
                     break;
                 }
@@ -174,7 +180,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
             style={{ height: `calc(100vh - ${indexStore.navHeight}px)` }}
             scrollY={true}
             refresherDefaultStyle='black'
-            scrollWithAnimation={true}
+            scrollWithAnimation={false}
             scrollIntoView={currentScrollId}
             onScroll={handleScroll}
         >
@@ -200,7 +206,7 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
 
                 {
                     openBookData?.contentData?.records?.map(item => {
-                        let arr = item.paragraphInfo.content?.split(/\s/ig)
+                        let arr = item.paragraphInfo.content?.match(/[^\n]*\n?/g);
                         return <View
                             id={'paragraphNo-' + item.paragraphInfo.paragraphNo}
                             key={item.paragraphInfo.paragraphNo}
@@ -208,7 +214,10 @@ const BookArticle: React.FC<BookArticleProps> = ({ store }) => {
                         >
                             {
                                 arr?.map((str, index) => {
-                                    return <Text className='shrot-text' id={'paragraphNo-' + item.paragraphInfo.paragraphNo + '-' + index} key={index}>{str}</Text>
+                                    // let strArr = str?.match(/[^。]*。/g)
+                                    return <Text className='shrot-text' id={'paragraphNo-' + item.paragraphInfo.paragraphNo + '-' + index} key={index}>{
+                                       str
+                                    }</Text>
                                 })
                             }
                         </View>