トレインビジョン画面作成開始

This commit is contained in:
mukai haruki 2021-07-07 23:50:01 +09:00
parent 4833b57c52
commit caf3c91d07
4 changed files with 238 additions and 2 deletions

View File

@ -0,0 +1,127 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1920"
height="1080"
viewBox="0 0 507.99999 285.75"
version="1.1"
id="svg11533"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs11530">
<linearGradient
id="linearGradient13480">
<stop
style="stop-color:#b3b3b3;stop-opacity:0.39650384"
offset="0"
id="stop13476" />
<stop
style="stop-color:#b1b3b3;stop-opacity:1"
offset="1"
id="stop13478" />
</linearGradient>
<linearGradient
xlink:href="#linearGradient13480"
id="linearGradient13482"
x1="120.31398"
y1="254.34488"
x2="120.31398"
y2="232.13708"
gradientUnits="userSpaceOnUse" />
</defs>
<g
id="layer2">
<rect
style="fill:#b3b3b3;stroke-width:0.0264583;stroke-linejoin:round"
id="rect11685"
width="507.99976"
height="127.90022"
x="0.00078973232"
y="0.0012354113"
ry="0.27422741" />
</g>
<g
id="layer1">
<rect
style="fill:#ffffff;stroke-width:0.0264583;stroke-linejoin:round"
id="rect11616"
width="356.69244"
height="73.607117"
x="75.653778"
y="46.110729"
ry="0.27422741" />
<path
id="rect11811"
style="fill:url(#linearGradient13482);fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
d="M 0.06406483,230.63481 H 486.86378 l 21.16667,12.60011 -21.16667,12.60012 H 0.06406483 Z" />
</g>
<g
id="layer3">
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768"
cx="309.73865"
cy="243.23601"
r="12.648833" />
<circle
style="fill:#ff0000;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-95"
cx="122.67834"
cy="243.41669"
r="12.648833" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-0"
cx="60.324902"
cy="243.41669"
r="12.648833" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-9"
cx="372.0921"
cy="243.23601"
r="12.648833" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-2"
cx="247.38519"
cy="243.23601"
r="12.648833" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-6"
cx="185.03177"
cy="243.23601"
r="12.648833" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0264583;stroke-linejoin:round"
id="path13768-64"
cx="434.44556"
cy="243.23601"
r="12.648833" />
<text
xml:space="preserve"
style="font-size:38.1px;line-height:1.25;font-family:'Rounded Mgen+ 2p';-inkscape-font-specification:'Rounded Mgen+ 2p';display:none;stroke-width:0.264583"
x="-60.013622"
y="264.55133"
id="text15956"
transform="rotate(-44.541485)"><tspan
style="font-size:38.1px;stroke-width:0.264583"
x="-60.013622"
y="264.55133"
id="tspan15958">ななめ</tspan></text>
<text
xml:space="preserve"
style="font-size:66.1458px;line-height:1.25;font-family:'Rounded Mgen+ 2p';-inkscape-font-specification:'Rounded Mgen+ 2p';display:none;stroke-width:0.264583"
x="154.7737"
y="107.44069"
id="text24520"><tspan
style="font-size:66.1458px;stroke-width:0.264583"
x="154.7737"
y="107.44069"
id="tspan24522">ななめ</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

15
menu.js
View File

@ -1,5 +1,6 @@
import React, { Component, useRef, useState, useEffect } from 'react';
import {StatusBar,View,LayoutAnimation,ScrollView,Linking,Text,TouchableOpacity } from 'react-native';
import Image from 'react-native-remote-svg';
import Constants from 'expo-constants';
import { List, ListItem } from 'native-base';
import Icon from 'react-native-vector-icons/Entypo';
@ -12,6 +13,7 @@ import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } f
import * as WebBrowser from 'expo-web-browser';
import ActionSheet from "react-native-actions-sheet";
import LottieView from 'lottie-react-native';
import SvgUri from 'react-native-svg-uri';
export default function(props) {
const navigation = useNavigation();
@ -75,6 +77,18 @@ export function Menu(props) {
<Text style={{color:"white",fontSize:18}}>列車の運行計画混雑状況感染症対策への取り組み</Text>
<View style={{flex:1}} />
</TouchableOpacity>
<View style={{alignItems:"center"}}>
<Image source={require('./assets/トレインビジョン関係/1.svg')}style={{ width: wp("80%"), height: wp("80%")/16*9}}/>
<View style={{ position:"absolute",top:0,left:(wp("100%")-wp("80%"))/2,width: wp("80%"), height: wp("80%")/16*9}}>
<Text style={{position:"absolute",top:"2%",left:"2%",fontStyle:"italic",fontWeight:"bold",fontSize:parseInt("20%"),color:"blue"}}>快速 マリンライナー</Text>
<View style={{position:"absolute",top:"18%",alignContent:"center",flexDirection:"row"}}>
<View style={{flex:1}}/>
<Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"dark"}}>坂出</Text>
<View style={{flex:1}}/>
</View>
</View>
</View>
<TouchableOpacity /* onPress={()=>alert("まだうごかないよ〜♡ごめんね!!")} */ onPress={() => {actionSheetRef.current?.setModalVisible()}}>
<View style={{backgroundColor:"#0099CC",borderRadius:5,margin:5,borderColor:"black",borderWidth:2,overflow:"hidden"}}>
<ScrollView scrollEnabled={false} style={{backgroundColor:"#0099CC",borderRadius:5,maxHeight:300,}}>
@ -225,6 +239,7 @@ export function Menu(props) {
<Text style={{color:"white",fontSize:18}}>制作運営のTwitterです</Text>
<View style={{flex:1}} />
</TouchableOpacity>
<SvgUri width="200" height="200" source={ require('./assets/トレインビジョン関係/1.svg') } />
</ScrollView>
<ActionSheet ref={actionSheetRef}gestureEnabled CustomHeaderComponent={()=>{}}>
<View style={{backgroundColor:"#0099CC",borderRadius:5,borderColor:"dark",borderWidth:1}}>

View File

@ -28,10 +28,13 @@
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.1.0",
"react-native-remote-svg": "^2.0.6",
"react-native-responsive-screen": "^1.4.2",
"react-native-router-flux": "^4.3.1",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.0.0",
"react-native-svg": "12.1.0",
"react-native-svg-uri": "^1.2.3",
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "11.2.3"
},

View File

@ -3628,6 +3628,11 @@ bmp-js@^0.1.0:
resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233"
integrity sha1-4Fpj95amwf8l9Hcex62twUjAcjM=
boolbase@^1.0.0, boolbase@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bplist-creator@0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.8.tgz#56b2a6e79e9aec3fc33bf831d09347d73794e79c"
@ -4317,6 +4322,29 @@ crypto-random-string@^1.0.0:
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
css-select@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
dependencies:
boolbase "^1.0.0"
css-what "^3.2.1"
domutils "^1.7.0"
nth-check "^1.0.2"
css-tree@^1.0.0-alpha.39:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-what@^3.2.1:
version "3.4.2"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
csstype@^2.2.0:
version "2.6.10"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
@ -4479,6 +4507,14 @@ diff@^5.0.0:
resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
dependencies:
domelementtype "^2.0.1"
entities "^2.0.0"
dom-storage@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.1.0.tgz#00fb868bc9201357ea243c7bcfd3304c1e34ea39"
@ -4489,6 +4525,24 @@ dom-walk@^0.1.0:
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
domelementtype@1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
domelementtype@^2.0.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
domutils@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
dependencies:
dom-serializer "0"
domelementtype "1"
ecc-jsbn@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@ -4548,6 +4602,11 @@ end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"
entities@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
env-paths@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@ -6613,6 +6672,11 @@ md5-file@^3.2.3:
dependencies:
buffer-alloc "^1.1.0"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
merge-stream@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
@ -7402,6 +7466,13 @@ npmlog@^4.1.2, npmlog@~4.1.2:
gauge "~2.7.3"
set-blocking "~2.0.0"
nth-check@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
dependencies:
boolbase "~1.0.0"
nullthrows@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@ -8212,6 +8283,11 @@ react-native-reanimated@~2.1.0:
mockdate "^3.0.2"
string-hash-64 "^1.0.3"
react-native-remote-svg@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/react-native-remote-svg/-/react-native-remote-svg-2.0.6.tgz#5f8bc7cefc18f4d37cf02f8158d6b2a9f534891d"
integrity sha512-tQbDL+gtfGgG9Evz5TOn5Odmrn/EYsmsLqVZ0Do0VMJevfLBuQRioLiwRsI/BCgOHu1oQLZIIE5p7V/lN9jLrw==
react-native-responsive-screen@^1.4.2:
version "1.4.2"
resolved "https://registry.yarnpkg.com/react-native-responsive-screen/-/react-native-responsive-screen-1.4.2.tgz#45280826d24f9accbfdf46a36cb8e6d780f76f28"
@ -8263,6 +8339,21 @@ react-native-size-matters@^0.3.1:
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
react-native-svg-uri@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/react-native-svg-uri/-/react-native-svg-uri-1.2.3.tgz#2f67f30564068a0fee68a751845332a5185a1aab"
integrity sha1-L2fzBWQGig/uaKdRhFMypRhaGqs=
dependencies:
xmldom "^0.1.22"
react-native-svg@12.1.0:
version "12.1.0"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d"
integrity sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w==
dependencies:
css-select "^2.1.0"
css-tree "^1.0.0-alpha.39"
react-native-tab-view@^2.15.2:
version "2.16.0"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
@ -9029,7 +9120,7 @@ source-map@^0.5.0, source-map@^0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
source-map@^0.6.0, source-map@~0.6.1:
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -9917,7 +10008,7 @@ xmldoc@^1.1.2:
dependencies:
sax "^1.2.1"
xmldom@0.1.x:
xmldom@0.1.x, xmldom@^0.1.22:
version "0.1.31"
resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==