You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.9 KiB
115 lines
2.9 KiB
import React, { useEffect, useState } from 'react';
|
|
import { Text, View, StyleSheet, useColorScheme, FlatList, ScrollView } from 'react-native';
|
|
import Svg, { Defs, LinearGradient, Mask, Path, Rect, SvgUri, SvgXml, Text as SvgText } from 'react-native-svg';
|
|
import DetailExamples from '../components/DetailExamples';
|
|
import DetailRadical from '../components/DetailRadical';
|
|
import { Kanji } from '../model/kanji';
|
|
|
|
const Detail = ({route}) => {
|
|
const kanji:Kanji = route.params.kanji;
|
|
const detailStyle = useColorScheme() == 'light' ? detailStyle_light : detailStyle_dark;
|
|
|
|
const [iconXml, setIconXml] = useState('<svg></svg>');
|
|
const [imgXml, setImgXml] = useState('<svg></svg>');
|
|
|
|
const fetchXml = async () => {
|
|
const imgxml = await (await fetch(kanji.image)).text();
|
|
setImgXml(imgxml);
|
|
const iconxml = await (await fetch(kanji.radical.position)).text();
|
|
setIconXml(iconxml);
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchXml();
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<View style={detailStyle.container}>
|
|
<View>
|
|
<Text style={detailStyle.text}>{kanji.onyomi}</Text>
|
|
<Text style={detailStyle.text}>{kanji.kunyomi}</Text>
|
|
</View>
|
|
<SvgXml
|
|
xml={imgXml
|
|
.replace(/fill="#[0-9a-f]{6}"/g, `fill=${detailStyle.svg.color}`)}
|
|
width="100"
|
|
height="100"/>
|
|
|
|
<Text style={detailStyle.tinyText}>{kanji.strokes + " strokes"}</Text>
|
|
<Text style={detailStyle.meaningText}>{kanji.meaning}</Text>
|
|
|
|
<Text style={detailStyle.title}>Radical</Text>
|
|
<DetailRadical character={kanji.radical.character} icon={iconXml}/>
|
|
|
|
<Text style={detailStyle.title}>Examples</Text>
|
|
<DetailExamples data={kanji.examples} />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
const detailStyle_light = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: "#e4e4e4",
|
|
height: "100%",
|
|
width: "100%"
|
|
},
|
|
svg: {
|
|
color: "black"
|
|
},
|
|
title: {
|
|
fontWeight: "bold",
|
|
fontSize: 20,
|
|
},
|
|
text: {
|
|
color: "black"
|
|
},
|
|
tinyText: {
|
|
fontSize: 10,
|
|
color: "black"
|
|
},
|
|
meaningText: {
|
|
fontSize: 20,
|
|
color: "#FF5C5C",
|
|
fontWeight: "900",
|
|
|
|
}
|
|
})
|
|
|
|
|
|
const detailStyle_dark = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: "#1c1c1c",
|
|
},
|
|
svg: {
|
|
color: "white"
|
|
},
|
|
title: {
|
|
fontWeight: "bold",
|
|
fontSize: 20,
|
|
color: "white"
|
|
},
|
|
text: {
|
|
color: "white"
|
|
},
|
|
tinyText: {
|
|
fontSize: 10,
|
|
color: "white"
|
|
},
|
|
meaningText: {
|
|
fontSize: 20,
|
|
color: "#FF5C5C",
|
|
fontWeight: "900",
|
|
|
|
}
|
|
});
|
|
|
|
export default Detail; |