diff --git a/src/components/TrainTypeBoxSaikyo.tsx b/src/components/TrainTypeBoxSaikyo.tsx index 5cfbbd7ec..c40f031be 100644 --- a/src/components/TrainTypeBoxSaikyo.tsx +++ b/src/components/TrainTypeBoxSaikyo.tsx @@ -30,28 +30,18 @@ type Props = { const styles = StyleSheet.create({ root: { + width: isTablet ? 175 : 96.25, + height: isTablet ? 55 : 30.25, justifyContent: 'center', alignItems: 'center', - borderBottomLeftRadius: isTablet ? 8 : 4, - borderBottomRightRadius: isTablet ? 8 : 4, - overflow: 'hidden', - borderLeftWidth: isTablet ? 0.5 : 0.75, - borderRightWidth: isTablet ? 0.5 : 0.75, - borderBottomWidth: isTablet ? 0.5 : 0.75, borderColor: 'white', }, - container: { - width: isTablet ? 175 : 96.25, - height: isTablet ? 55 : 30.25, - borderBottomLeftRadius: isTablet ? 8 : 4, - borderBottomRightRadius: isTablet ? 8 : 4, - overflow: 'hidden', - position: 'relative', - }, gradient: { width: isTablet ? 175 : 96.25, height: isTablet ? 55 : 30.25, position: 'absolute', + borderBottomLeftRadius: isTablet ? 8 : 4, + borderBottomRightRadius: isTablet ? 8 : 4, }, text: { color: '#fff', @@ -65,11 +55,11 @@ const styles = StyleSheet.create({ }, textWrapper: { flex: 1, - width: '100%', - height: '100%', justifyContent: 'center', alignItems: 'center', position: 'absolute', + width: isTablet ? 175 : 96.25, + height: isTablet ? 55 : 30.25, }, }) @@ -151,7 +141,7 @@ const TrainTypeBoxSaikyo: React.FC = ({ return 0 }, [trainTypeName?.length]) - const paddingLeft = useMemo(() => { + const marginLeft = useMemo(() => { if (trainTypeName?.length === 2 && Platform.OS === 'ios') { return 8 } @@ -159,7 +149,7 @@ const TrainTypeBoxSaikyo: React.FC = ({ return 0 }, [trainTypeName?.length]) - const prevPaddingLeft = usePrevious(paddingLeft) + const prevMarginLeft = usePrevious(marginLeft) const prevTrainTypeText = usePrevious(trainTypeName) const prevLetterSpacing = usePrevious(letterSpacing) @@ -196,70 +186,72 @@ const TrainTypeBoxSaikyo: React.FC = ({ opacity: textOpacityAnim.value, })) + // 表示に使う1行目のみの文字数で判定 const numberOfLines = useMemo( - () => (trainTypeName.length <= 10 ? 1 : 2), - [trainTypeName.length] + () => (trainTypeName.split('\n')[0].length <= 10 ? 1 : 2), + [trainTypeName] ) const prevNumberOfLines = useMemo( - () => ((prevTrainTypeText?.length ?? 0) <= 10 ? 1 : 2), - [prevTrainTypeText?.length] + () => + prevTrainTypeText + ? prevTrainTypeText.split('\n')[0].length <= 10 + ? 1 + : 2 + : 0, + [prevTrainTypeText] ) return ( - - - - - + + + + - - - {trainTypeName} - - - - - {prevTrainTypeText} - - + + + {trainTypeName} + + + {prevTrainTypeText} + ) }