리액트 네이티브로 하단바 만들기 - 웹뷰 버전

리액트 네이티브의 웹뷰로 업로드하기에앞서 그래도 네이티브를 맛보기위해

하단바는 네이티브스럽게 버튼으로 url 을 이동하는게아닌 웹뷰를 이동할수있게 하는 CreateBottomTabNavigator를 사용해보도록 하겠다 . 탭이라는 개념은 리액트에선 다뤄보지못햇던 것이라 처음 사용해보았는대

네이티브안에서의 탭은 컴포넌트의 스크린을 비춰준다의 의미가 강한것 같았다 .

그리고 나는 expo/vecor-icons 라는 아이콘을 사용하여 간단한 하단바를 만들어 탭으로 웹뷰를 이동하는 코드를 만들어보았다 

 

export default function MyTabs() {

  return (

    <Tab.Navigator

      initialRouteName="Home"

      screenOptions={{

        tabBarStyle: styles.tabBarStyle,

        tabBarActiveTintColor: "#F95001", // 텍스트 색상을 변경하는 옵션

        tabBarHideOnKeyboard: true,

      }}

    >

      <Tab.Screen

        name="일정"

        component={Diary}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <Entypo name={"calendar"} color={color} size={size} />

          ),

        }}

      />

      <Tab.Screen

        name="도감"

        component={Book}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <Feather name={"book"} color={color} size={size} />

          ),

        }}

      />

      <Tab.Screen

        name="HOME"

        component={HomeMenu}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <MaterialCommunityIcons

              name={"home-circle"}

              color={color}

              size={size}

            />

          ),

        }}

      />

      <Tab.Screen

        name="구독"

        component={Quick}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <FontAwesome5 name={"shopping-basket"} color={color} size={size} />

          ),

        }}

      />

      <Tab.Screen

        name="MAP"

        component={Map}

        options={{

          headerShown: false,

          tabBarIcon: ({ color, size }) => (

            <Entypo name={"map"} color={color} size={size} />

          ),

        }}

      />

    </Tab.Navigator>

  );

}

 

헤더는 웹뷰내에 미디어쿼리사용으로 사용하지않고 하단바로만 사용하였습니다 .고로 headerShown :false

 

이로서 하단바 제작이 완료되었습니다 .

 

웹뷰 컴포넌트도 추가적으로 하나정도는 올려보겠습니다 .

function Diary({ navigation }) {

  const webViewRef = useContext(WebViewContext);

  const [loading, setLoading] = useState(true);

  const [key, setKey] = useState(0);

  useEffect(() => {

    async function requestLocationPermission() {

      try {

        let { status } = await Location.requestForegroundPermissionsAsync();

        if (status === "granted") {

          console.log("Location permission granted");

          reloadWebView();

          setLoading(false);

        } else {

          console.log("Location permission denied");

        }

      } catch (error) {

        console.error("Error requesting location permission:", error);

      }

    }

    requestLocationPermission();

  }, []);

  const reloadWebView = () => {

    // key 값을 변경하여 WebView를 리랜더링하도록 유도

    setKey((prevKey) => prevKey + 1);

  };

  useFocusEffect(

    React.useCallback(() => {

      // 화면이 포커스되었을 때만 호출되도록 수정

      webViewRef.current.injectJavaScript(`location.href=${HOME_URL}`);

      reloadWebView();

    }, [webViewRef])

  );

  function LoadAnimation() {

    return <Spinner visible={loading} />;

  }

  return (

    <SafeAreaView style={styles.container}>

      <WebView

        key={key}

        ref={webViewRef}

        onLoad={() => setLoading(false)}

        source={{ uri: HOME_URL + "diy" }}

        javaScriptEnabled={true}

        domStorageEnabled={true}

        geolocationEnabled={true}

        mixedContentMode="always"

      />

      {loading && <LoadAnimation loading={loading} />}

    </SafeAreaView>

  );

}

 

tab으로 웹뷰컴포트 이동시, 문제점이 많이 발생하였는데  로그인이 랜더링이 일어나지않는다는것과 안드로이드 위치정보 서비스가 적용이 안된다는점! 해결법으로 웹뷰마다 key값을 넣어주었으며 새로운 키값으로 바뀌게 해주었습니다 .

그리고 안드로이드 위치정보서비스는 gpt의 도움을 받아 해결받았습니다 . 비동기로 위치정보를 요청하는것 이더군요 ( ios는 정상적으로 작동합니다 ^^ ) 

 

이상 네이티브 하단바 만들기입니다 . 이제 구글콘솔에 올려볼까~