TwitterをSocialMenuに移動
This commit is contained in:
harukin-expo-dev-env
parent
b108029868
commit
bb0ae86f67
146
components/ActionSheetComponents/SocialMenu.tsx
Normal file
146
components/ActionSheetComponents/SocialMenu.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
import React, { useRef } from "react";
|
||||
import { View, Platform, Text } from "react-native";
|
||||
import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { ListItem } from "@rneui/themed";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { Linking } from "react-native";
|
||||
import TouchableScale from "react-native-touchable-scale";
|
||||
export const Social = () => {
|
||||
const actionSheetRef = useRef(null);
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<ActionSheet
|
||||
gestureEnabled
|
||||
CustomHeaderComponent={<></>}
|
||||
ref={actionSheetRef}
|
||||
isModal={Platform.OS == "ios"}
|
||||
containerStyle={
|
||||
Platform.OS == "android"
|
||||
? {
|
||||
paddingBottom: insets.bottom,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
useBottomSafeAreaPadding={Platform.OS == "android"}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0099CC",
|
||||
borderTopRadius: 5,
|
||||
borderColor: "dark",
|
||||
borderWidth: 1,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
|
||||
<View
|
||||
style={{
|
||||
height: 6,
|
||||
width: 45,
|
||||
borderRadius: 100,
|
||||
backgroundColor: "#f0f0f0",
|
||||
marginVertical: 10,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name="web"
|
||||
style={{ padding: 5 }}
|
||||
color="white"
|
||||
size={30}
|
||||
/>
|
||||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||||
JR四国公式SNS一族
|
||||
</Text>
|
||||
</View>
|
||||
<ScrollView
|
||||
style={{
|
||||
padding: 10,
|
||||
backgroundColor: "white",
|
||||
borderBottomLeftRadius: 10,
|
||||
borderBottomRightRadius: 10,
|
||||
flex:1
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{
|
||||
url: "https://twitter.com/jr_shikoku_info",
|
||||
name: "ＪＲ四国列車運行情報",
|
||||
},
|
||||
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_eigyo",
|
||||
name: "JR四国営業部【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_tokyo",
|
||||
name: "JR四国 東京営業情報【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_osaka",
|
||||
name: "JR四国 大阪営業部【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrs_matsuyama",
|
||||
name: "JR四国 松山駅 【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_kochi",
|
||||
name: "JR四国 高知駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jr_tokust",
|
||||
name: "JR四国 徳島駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_uwjm",
|
||||
name: "JR四国 宇和島駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_wkama",
|
||||
name: "JR四国 ワープ高松支店【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_wkoch",
|
||||
name: "JR四国 ワープ高知支店【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/Yoakemonogatari",
|
||||
name: "志国土佐 時代の夜明けのものがたり【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/Smile_Eki_Chan",
|
||||
name: "すまいるえきちゃん♡JR四国【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/sper_ponchan",
|
||||
name: "しこくたぬきのぽんちゃん 【四国家サポーターズクラブ】",
|
||||
},
|
||||
].map((d) => (
|
||||
<ListItem
|
||||
bottomDivider
|
||||
onPress={() => Linking.openURL(d.url)}
|
||||
key={d.url}
|
||||
friction={90} //
|
||||
tension={100} // These props are passed to the parent component (here TouchableScale)
|
||||
activeScale={0.95} //
|
||||
Component={TouchableScale}
|
||||
>
|
||||
<ListItem.Content>
|
||||
<ListItem.Title>{d.name}</ListItem.Title>
|
||||
</ListItem.Content>
|
||||
<ListItem.Chevron />
|
||||
</ListItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ActionSheet>
|
||||
);
|
||||
};
|
||||
@ -5,6 +5,7 @@ import { StationDeteilView } from "./StationDeteilView";
|
||||
import { TrainMenuLineSelector } from "./TrainMenuLineSelector";
|
||||
import { TrainIconUpdate } from "./TrainIconUpdate";
|
||||
import { SpecialTrainInfo } from "./SpecialTrainInfo";
|
||||
import { Social } from "./SocialMenu";
|
||||
|
||||
registerSheet("EachTrainInfo", EachTrainInfo);
|
||||
registerSheet("JRSTraInfo", JRSTraInfo);
|
||||
@ -12,5 +13,6 @@ registerSheet("StationDetailView", StationDeteilView);
|
||||
registerSheet("TrainMenuLineSelector", TrainMenuLineSelector);
|
||||
registerSheet("TrainIconUpdate", TrainIconUpdate);
|
||||
registerSheet("SpecialTrainInfo", SpecialTrainInfo);
|
||||
registerSheet("Social", Social);
|
||||
|
||||
export {};
|
||||
|
||||
@ -185,108 +185,20 @@ export const FixedContentBottom = (props) => {
|
||||
<Text style={{ color: "white" }}>(通話料がかかります)</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0099CC",
|
||||
borderRadius: 10,
|
||||
margin: 10,
|
||||
borderColor: "black",
|
||||
borderWidth: 2,
|
||||
}}
|
||||
<TextBox
|
||||
backgroundColor="#0099CC"
|
||||
flex={1}
|
||||
onPressButton={() =>
|
||||
SheetManager.show("Social")
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name="twitter"
|
||||
style={{ padding: 5 }}
|
||||
color="white"
|
||||
size={30}
|
||||
/>
|
||||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||||
JR四国公式Twitter一族
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
padding: 10,
|
||||
backgroundColor: "white",
|
||||
borderBottomLeftRadius: 10,
|
||||
borderBottomRightRadius: 10,
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{
|
||||
url: "https://twitter.com/jr_shikoku_info",
|
||||
name: "ＪＲ四国列車運行情報",
|
||||
},
|
||||
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_eigyo",
|
||||
name: "JR四国営業部【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_tokyo",
|
||||
name: "JR四国 東京営業情報【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_osaka",
|
||||
name: "JR四国 大阪営業部【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrs_matsuyama",
|
||||
name: "JR四国 松山駅 【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_kochi",
|
||||
name: "JR四国 高知駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jr_tokust",
|
||||
name: "JR四国 徳島駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_uwjm",
|
||||
name: "JR四国 宇和島駅【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/jrshikoku_wkama",
|
||||
name: "JR四国 ワープ高松支店【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/JRshikoku_wkoch",
|
||||
name: "JR四国 ワープ高知支店【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/Yoakemonogatari",
|
||||
name: "志国土佐 時代の夜明けのものがたり【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/Smile_Eki_Chan",
|
||||
name: "すまいるえきちゃん♡JR四国【公式】",
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/sper_ponchan",
|
||||
name: "しこくたぬきのぽんちゃん 【四国家サポーターズクラブ】",
|
||||
},
|
||||
].map((d) => (
|
||||
<ListItem
|
||||
bottomDivider
|
||||
onPress={() => Linking.openURL(d.url)}
|
||||
key={d.url}
|
||||
friction={90} //
|
||||
tension={100} // These props are passed to the parent component (here TouchableScale)
|
||||
activeScale={0.95} //
|
||||
Component={TouchableScale}
|
||||
>
|
||||
<ListItem.Content>
|
||||
<ListItem.Title>{d.name}</ListItem.Title>
|
||||
</ListItem.Content>
|
||||
<ListItem.Chevron />
|
||||
</ListItem>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||
ソーシャルメディア
|
||||
</Text>
|
||||
<Text style={{ color: "white", fontSize: 18 }}>
|
||||
JR四国のSNS一覧です。
|
||||
</Text>
|
||||
</TextBox>
|
||||
<Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
|
||||
<TextBox
|
||||
backgroundColor="#8c00d6"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user