2023-09-06

import React, { useRef, useState, useEffect } from 'react';
import {Text, View, ScrollView, Dimensions, TouchableOpacity} from 'react-native';

const windowWidth = Dimensions.get('window').width;

let sentences = [["Groundwater is the word used to describe water that saturates the ground, filling all the available spaces.", "By far the most abundant type of groundwater is meteoric water; this is the groundwater that circulates as part of the water cycle. Ordinary meteoric water is water that has soaked into the ground from the surface, from precipitation (rain and snow) and from lakes and streams.", "There it remains, sometimes for long periods, before emerging at the surface again. ","At first thought it seems incredible that there can be enough space in the \"solid\" ground underfoot to hold all this water."], ["The necessary space is there, however, in many forms.", "The commonest spaces are those among the particles-sand grains and tiny pebbles-of loose, unconsolidated sand and gravel. Beds of this material, out of sight beneath the soil, are common.", "They are found wherever fast rivers carrying loads of coarse sediment once flowed.", "For example, as the great ice sheets that covered North America during the last ice age steadily melted away, huge volumes of water flowed from them."]];

export default function App() {
  const left = 12;
  const right=16;
  const textWidth = windowWidth - left-right;
  const [pageDatas, setPageDatas] = useState([]);
  const [isLoadData, setIsLoadData] = useState(true);
  const datasRef = useRef(([].concat(sentences)).map(i=>i.map(a=>a.split(" "))));
  useEffect(() => {
    const dealWords = ([].concat(sentences)).map(i=>i.map(a=>a.split(" ")));
    setTimeout(() => {
      var datas = [];
      datasRef.current.map((sections, a) => {
        var dataSections = [];
        var leading = 0;
        sections.map((items, b)=>{
          var dataItems = [];
          var text = "";
          items.map((i, index) => {
            if (i + leading > textWidth) {
              dataItems.push(text);
              leading = i;
              text = " "+dealWords[a][b][index];
            } else {
              text += (" "+dealWords[a][b][index]);
              leading += i;
            }
            if (index == items.length - 1) {
              dataItems.push(text);
            } 
          });
          dataSections.push(dataItems);
        });
        datas.push(dataSections);
      })
      setPageDatas(datas);
    }, 1000);  
  }, []);

  useEffect(() => {
    if (pageDatas.length > 0) {
      setIsLoadData(false);
    }
  }, [pageDatas]);

  if (isLoadData) {
    return sentences.map((item, i) => <View>
          {
            item.map((texts, index) => texts.split(" ").map((text, b) => <MeasureTextExample 
            text={" "+ text} fontSize={16} callBack={(w)=>{
              datasRef.current[i][index][b] = w
          }}/>))})
        </View>)
       
  }
  return (
    <View
      style={{
        flex: 1,
      }}>
      <ScrollView style={{width: windowWidth, paddingLeft: left, paddingRight: right}}>
      <View style={{}}>
        {pageDatas.map((item, i) => <View style={{}}>
          <View style={{height: 20}} key={i}/>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {item.map((texts, index) => texts.map((text, b) =>
              <TouchableOpacity>
                <Text 
                  key={'a'+index}
                  style={{lineHeight: 26, color: '#333', fontWeight: index == 2 ? 700: 400, fontSize: index == 2 ? 15: 16}}>
                {text}</Text>
              </TouchableOpacity>))}
          </View>
        </View>)}
       
      </View>
      </ScrollView>
    </View>
  );
}



function MeasureTextExample({text, fontSize=14, fontWeight=400, callBack}) {
  const onTextLayout = event => {
    callBack(event.nativeEvent.layout.width);
  };

  return (
    <View>
      <Text
        onLayout={onTextLayout}
        style={{ position: 'absolute', opacity: 0, fontSize, fontWeight }}
      >
        {text}
      </Text>
    </View>
  );
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一 🔺【原文摘录】 阿德勒想要帮我们挣脱的第一个束缚:来自过去;第二个束缚:来自人际关系;第三个束缚:来自未来。 ...
    碧霄诗情_4522阅读 101评论 0 0
  • 无味。 在以前的更文中,记得总是不由自主的讲着一些什么似是而非的人生道理。 这种系列的文字,想必还是让人觉得很是无...
    Sunny06e阅读 165评论 0 14
  • 我们已经知道,资本是按时间顺序通过生产领域和流通领域两个阶段完成运动的。资本在生产领域停留的时间是它的生产时间,资...
    杜文硕阅读 144评论 0 0
  • 其实每个人都自顾不暇,哪有那么多时间来去关心别人,所以收不到别人的关注也很正常,所以就更要珍惜别人对自己的好。 如...
    楼前的树阅读 41评论 0 0
  • 存货视频没有了,建议一次性拍个7条,但是还是美食视频更重要啊,昨天有个人拍的好努力的,其实需要帮忙的话和旁边人说,...
    林拉米阅读 57评论 0 1