画像共有機能を追加
This commit is contained in:
harukin-OneMix4
parent
80f4913f89
commit
4784899a07
@ -12,6 +12,8 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
|
||||
import LottieView from "lottie-react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import ViewShot from "react-native-view-shot";
|
||||
import * as Sharing from "expo-sharing";
|
||||
import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
|
||||
export const JRSTraInfo = () => {
|
||||
const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
|
||||
@ -19,6 +21,20 @@ export const JRSTraInfo = () => {
|
||||
const actionSheetRef = useRef(null);
|
||||
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
||||
const insets = useSafeAreaInsets();
|
||||
const viewShot = useRef(null);
|
||||
|
||||
const onCapture = async () => {
|
||||
const url = await viewShot.current.capture();
|
||||
|
||||
const ok = await Sharing.isAvailableAsync();
|
||||
if (ok) {
|
||||
await Sharing.shareAsync(
|
||||
"file://" + url,
|
||||
(options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ActionSheet
|
||||
gestureEnabled
|
||||
@ -42,7 +58,10 @@ export const JRSTraInfo = () => {
|
||||
borderWidth: 1,
|
||||
}}
|
||||
>
|
||||
<View style={{ height: 26, width: "100%" }}>
|
||||
<ViewShot ref={viewShot} options={{ format: "jpg" }}>
|
||||
<View
|
||||
style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
height: 6,
|
||||
@ -55,7 +74,12 @@ export const JRSTraInfo = () => {
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||||
style={{
|
||||
padding: 10,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0099CC",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||||
列車遅延速報EX
|
||||
@ -115,14 +139,26 @@ export const JRSTraInfo = () => {
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ padding: 10 }}>
|
||||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||||
<View style={{ padding: 10, backgroundColor: "#0099CC" }}>
|
||||
<Text
|
||||
style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
|
||||
>
|
||||
列車遅延情報EXについて
|
||||
</Text>
|
||||
<Text style={{ color: "white" }}>
|
||||
列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ViewShot>
|
||||
<View
|
||||
style={{
|
||||
padding: 10,
|
||||
backgroundColor: "#0099CC",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
padding: 10,
|
||||
@ -132,6 +168,8 @@ export const JRSTraInfo = () => {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0099CC",
|
||||
flex: 1,
|
||||
}}
|
||||
onPress={() =>
|
||||
Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")
|
||||
@ -140,14 +178,30 @@ export const JRSTraInfo = () => {
|
||||
<MaterialCommunityIcons name="mastodon" color="white" size={30} />
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
||||
MastodonBOTはこちら！
|
||||
MastodonBOT
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
||||
→
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
padding: 10,
|
||||
flexDirection: "row",
|
||||
borderColor: "white",
|
||||
borderWidth: 1,
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0099CC",
|
||||
}}
|
||||
onPress={onCapture}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name="share-variant"
|
||||
color="white"
|
||||
size={30}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ActionSheet>
|
||||
);
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"expo-font": "~11.4.0",
|
||||
"expo-location": "~16.1.0",
|
||||
"expo-notifications": "~0.20.1",
|
||||
"expo-sharing": "~11.5.0",
|
||||
"expo-updates": "~0.18.17",
|
||||
"expo-web-browser": "~12.3.2",
|
||||
"firebase": "8.2.3",
|
||||
@ -45,6 +46,7 @@
|
||||
"react-native-svg": "13.9.0",
|
||||
"react-native-svg-uri": "^1.2.3",
|
||||
"react-native-vector-icons": "^8.1.0",
|
||||
"react-native-view-shot": "3.7.0",
|
||||
"react-native-webview": "^13.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
46
yarn.lock
46
yarn.lock
@ -3439,6 +3439,11 @@ balanced-match@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
|
||||
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
|
||||
|
||||
base64-arraybuffer@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
|
||||
integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
|
||||
|
||||
base64-js@^1.1.2, base64-js@^1.2.3, base64-js@^1.3.1, base64-js@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
|
||||
@ -4202,6 +4207,13 @@ crypto-random-string@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
|
||||
integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
|
||||
|
||||
css-line-break@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
|
||||
integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
|
||||
dependencies:
|
||||
utrie "^1.0.2"
|
||||
|
||||
css-select@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
|
||||
@ -4881,6 +4893,11 @@ expo-notifications@~0.20.1:
|
||||
fs-extra "^9.1.0"
|
||||
uuid "^3.4.0"
|
||||
|
||||
expo-sharing@~11.5.0:
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-sharing/-/expo-sharing-11.5.0.tgz#a8cad65874d882b7f75b12856b4ef55ea9b60a2d"
|
||||
integrity sha512-uerM5YH1FKDZXfkP9ORebvlMVOPP/AfoYgYBez6a8G9fztNYHnRCA6mgK+3aQmpnb3ltmjnAZC39kH18bTNcVw==
|
||||
|
||||
expo-structured-headers@~3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-structured-headers/-/expo-structured-headers-3.3.0.tgz#9f0b041a1d243a22a4a23d9eb19f02ace3c5258c"
|
||||
@ -5653,6 +5670,14 @@ hosted-git-info@^4.0.1, hosted-git-info@^4.0.2:
|
||||
dependencies:
|
||||
lru-cache "^6.0.0"
|
||||
|
||||
html2canvas@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
|
||||
integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
|
||||
dependencies:
|
||||
css-line-break "^2.1.0"
|
||||
text-segmentation "^1.0.3"
|
||||
|
||||
http-cache-semantics@^4.1.0:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
|
||||
@ -8858,6 +8883,13 @@ react-native-vector-icons@^8.1.0:
|
||||
prop-types "^15.7.2"
|
||||
yargs "^16.1.1"
|
||||
|
||||
react-native-view-shot@3.7.0:
|
||||
version "3.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-3.7.0.tgz#0c773500e7aac5d115a9dee3b83fa5156c950ed0"
|
||||
integrity sha512-tQruLNjs7Ee/p6xUgJqF6glnatHaq/UqaIQ6KdYIFG0+XpUZdhqmEM4WMLsYfayfFEhdlF86G1S3eXMOfDNzFg==
|
||||
dependencies:
|
||||
html2canvas "^1.4.1"
|
||||
|
||||
react-native-webview@^13.6.3:
|
||||
version "13.6.3"
|
||||
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.6.3.tgz#f3d26e942ef5cc5a07547f2e47903aa81a68e25e"
|
||||
@ -9913,6 +9945,13 @@ terser@^5.15.0:
|
||||
commander "^2.20.0"
|
||||
source-map-support "~0.5.20"
|
||||
|
||||
text-segmentation@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
|
||||
integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
|
||||
dependencies:
|
||||
utrie "^1.0.2"
|
||||
|
||||
text-table@^0.2.0, text-table@~0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
|
||||
@ -10267,6 +10306,13 @@ utils-merge@1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
|
||||
integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
|
||||
|
||||
utrie@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
|
||||
integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
|
||||
dependencies:
|
||||
base64-arraybuffer "^1.0.2"
|
||||
|
||||
uuid@9.0.0:
|
||||
version "9.0.0"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user