parent
6d8561da75
commit
f1a4952a2a
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,7 +1,13 @@
|
|||||||
{
|
{
|
||||||
"ExpandedNodes": [
|
"ExpandedNodes": [
|
||||||
""
|
"",
|
||||||
|
"\\assets",
|
||||||
|
"\\components",
|
||||||
|
"\\model",
|
||||||
|
"\\navigation",
|
||||||
|
"\\pages",
|
||||||
|
"\\redux"
|
||||||
],
|
],
|
||||||
"SelectedNode": "\\C:\\Users\\Siph9\\Source\\Repos\\LEARNIHON",
|
"SelectedNode": "\\components\\KanjiListCell.tsx",
|
||||||
"PreviewInSolutionExplorer": false
|
"PreviewInSolutionExplorer": false
|
||||||
}
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,67 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FlatList, StyleSheet, Text, useColorScheme, View } from 'react-native';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface detailExamplesProps {
|
||||||
|
data: { japanese: string, english: string }[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetailExamples = (props: detailExamplesProps) => {
|
||||||
|
|
||||||
|
const detailExamplesStyle = useColorScheme() == 'light' ? detailExamplesStyle_light : detailExamplesStyle_dark;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={detailExamplesStyle.container}>
|
||||||
|
<FlatList data={props.data} keyExtractor={item => item.japanese + item.english}
|
||||||
|
renderItem={
|
||||||
|
({ item }) =>
|
||||||
|
<View style={detailExamplesStyle.cellContainer} onStartShouldSetResponder={() => true}>
|
||||||
|
<Text style={detailExamplesStyle.textJapanese}>{item.japanese}</Text>
|
||||||
|
<Text style={detailExamplesStyle.textEnglish}>{item.english}</Text>
|
||||||
|
</View>
|
||||||
|
}>
|
||||||
|
</FlatList>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const detailExamplesStyle_light = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: '100%',
|
||||||
|
paddingBottom: 50,
|
||||||
|
},
|
||||||
|
cellContainer: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row"
|
||||||
|
},
|
||||||
|
textJapanese: {
|
||||||
|
width: "50%"
|
||||||
|
},
|
||||||
|
textEnglish: {
|
||||||
|
textAlign: "right",
|
||||||
|
width: "50%"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const detailExamplesStyle_dark = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: '100%',
|
||||||
|
paddingBottom: 50,
|
||||||
|
},
|
||||||
|
cellContainer: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row"
|
||||||
|
},
|
||||||
|
textJapanese: {
|
||||||
|
width: "50%",
|
||||||
|
color: "white"
|
||||||
|
},
|
||||||
|
textEnglish: {
|
||||||
|
textAlign: "right",
|
||||||
|
width: "50%",
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default DetailExamples;
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Text, useColorScheme, View } from 'react-native';
|
||||||
|
import { SvgXml } from 'react-native-svg';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface detailRadicalProps {
|
||||||
|
character: string,
|
||||||
|
icon: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetailRadical = (props: detailRadicalProps) => {
|
||||||
|
|
||||||
|
const detailRadicalStyle = useColorScheme() == 'light' ? detailRadicalStyle_light : detailRadicalStyle_dark;
|
||||||
|
return (
|
||||||
|
<View style={detailRadicalStyle.container}>
|
||||||
|
<Text style={detailRadicalStyle.radicalText}>{props.character}</Text>
|
||||||
|
<SvgXml
|
||||||
|
xml={props.icon
|
||||||
|
.replace(/fill="#[0-9a-f]{6}"/g, `fill=${detailRadicalStyle.svg.color}`)}
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
opacity={0.5}
|
||||||
|
style={detailRadicalStyle.radicalIcon}
|
||||||
|
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const detailRadicalStyle_light = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
height: 30,
|
||||||
|
width: 30,
|
||||||
|
},
|
||||||
|
svg: {
|
||||||
|
color: "#FF5C5C"
|
||||||
|
},
|
||||||
|
radicalIcon: {
|
||||||
|
position: "absolute"
|
||||||
|
},
|
||||||
|
radicalText: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
textAlign: "center",
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
fontSize: 25
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const detailRadicalStyle_dark = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
height: 30,
|
||||||
|
width: 30,
|
||||||
|
},
|
||||||
|
svg: {
|
||||||
|
color: "#FF5C5C"
|
||||||
|
},
|
||||||
|
radicalIcon: {
|
||||||
|
position: "absolute"
|
||||||
|
},
|
||||||
|
radicalText: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
textAlign: "center",
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
fontSize: 25,
|
||||||
|
color: "white"
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export default DetailRadical;
|
||||||
Loading…
Reference in new issue