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

menu.js

@@ -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}}>