147 lines
4.8 KiB
TypeScript
147 lines
4.8 KiB
TypeScript
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>
|
|
);
|
|
};
|