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>
);
}
2023-09-06
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 一 🔺【原文摘录】 阿德勒想要帮我们挣脱的第一个束缚:来自过去;第二个束缚:来自人际关系;第三个束缚:来自未来。 ...