비전공자 개발일기

React Native Webview 본문

React & React Native

React Native Webview

HiroDaegu 2022. 2. 13. 21:23
728x90
SMALL
import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";

const MYLINK = "https://relaxed-turing-e7ea57.netlify.app";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>WEBVIEW</Text>
      <View style={{ width: "100%", height: "100%" }}>
        <WebView
          source={{ url: MYLINK }}
          onLoad={console.log("Looooood!")}
        ></WebView>
      </View>
      <StatusBar style="auto"></StatusBar>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
    padding: 30,
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    borderColor: "#fff",
    borderWidth: 2,
    borderStyle: "solid",
  },
  text: {
    fontSize: 30,
    marginBottom: 20,
    fontWeight: "700",
    textAlign: "center",
    color: "#2598eb",
  },
});
728x90
LIST

'React & React Native' 카테고리의 다른 글

React Native Login & Basic Page  (0) 2022.02.27
React Native Webview2  (0) 2022.02.14
React Native Pressable  (0) 2022.02.06
React & React Native Props  (0) 2022.01.13
React & React Native Component  (0) 2022.01.11