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": [
|
||||
""
|
||||
"",
|
||||
"\\assets",
|
||||
"\\components",
|
||||
"\\model",
|
||||
"\\navigation",
|
||||
"\\pages",
|
||||
"\\redux"
|
||||
],
|
||||
"SelectedNode": "\\C:\\Users\\Siph9\\Source\\Repos\\LEARNIHON",
|
||||
"SelectedNode": "\\components\\KanjiListCell.tsx",
|
||||
"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