ファイルの分離

howto.js

@@ -1,7 +1,7 @@
-const WEBVIEW = "WEBVIEW";
-import React, { Component } from "react";
-import { StatusBar, View, TouchableOpacity, Text } from "react-native";
+import React from "react";
+import { View } from "react-native";
 import { WebView } from "react-native-webview";
+import { BigButton } from "./components/atom/BigButton";
 export default ({ navigation: { navigate }, route }) => {
   const { info, goTo, useShow } = route.params;
   const onExit = () => {
@@ -9,30 +9,13 @@ export default ({ navigation: { navigate }, route }) => {
     useShow && useShow();
   };
   return (
-    <View style={styles.View}>
+    <View style={styles}>
       <WebView
         useWebKit
         source={{ uri: info.replace("http://", "https://") }}
       />
-      <TouchableOpacity style={styles.touch} onPress={onExit}>
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+      <BigButton onPress={onExit} text="閉じる" />
     </View>
   );
 };
-const styles = {
-  View: { height: "100%", backgroundColor: "#0099CC" },
-  touch: {
-    padding: 10,
-    flexDirection: "row",
-    borderColor: "white",
-    borderWidth: 1,
-    margin: 10,
-    borderRadius: 5,
-    alignItems: "center",
-  },
-};
+const styles = { height: "100%", backgroundColor: "#0099CC" };