RN Prj - 스타벅스 Expo 안되는 문제

지난 번에 스타벅스에서 Expo app run이 되다 안되다 했던 것 같아서 이상했는데

오늘 다시 해보니, 스타벅스 wifi 로는 LAN 연결이 안되고있고

Tunnel로 잡으니 app 이 정상적으로 run 되는것을 확인.

잠시 되었다가 다시 연결이 끊어졌는데,

결론부터 얘기하면 스타벅스 같은 public wifi는 expo 활용이 어렵습니다.

이후부터는 모바일 핫스팟으로 엑스포 사용.

 

$ expo init projectName

$ cd projectName

$ npm install @react-navigation/native

$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

$ npm install @react-navigation/bottom-tabs

$ npm install @react-navigation/stack

$ expo start

 

나같은 사람이 역시 있지만, 답변은 아쉽게도 없네요 ㅋㅋ

https://stackoverflow.com/questions/59409815/expo-for-react-js-apps

Expo for React.js apps

아래는 Expo Comm. 내용인데 엑스포 담당자가 private wifi 를 쓰라는 복붙 스무리한 댓글을 달았네요~

 

 

 

 

App UI에 쓸 Tab Navigation 을 만들어봤으니, 다음에는 file을 tab 별로 분리해보겠습니다.

 

import * as React from 'react';
import { StyleSheet, Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function DiscountDetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>View of Discount Rate</Text>
    </View>
  );
}

function CalculatorScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Calculator screen</Text>
      <Button
        title="From Calculator, Go to Details"
        onPress={() => navigation.navigate('DiscountDetails')}
      />
    </View>
  );
}

function CheckListScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>CheckList screen</Text>
      <Button
        title="From CheckList, Go to Details"
        // onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SearchScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Search screen</Text>
      <Button
        title="From search, Go to Details"
        // onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function FAQScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>FAQ screen</Text>
      <Button
        title="From FAQ, Go to Details"
        // onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const CalculatorStack = createStackNavigator();

function CalculatorStackScreen() {
  return (
    <CalculatorStack.Navigator>
      <CalculatorStack.Screen name="Calculator" component={CalculatorScreen} />
      <CalculatorStack.Screen name="DiscountDetails" component={DiscountDetailsScreen} />
    </CalculatorStack.Navigator>
  );
}

const CheckListStack = createStackNavigator();

function CheckListStackScreen() {
  return (
    <CheckListStack.Navigator>
      <CheckListStack.Screen name="CheckList" component={CheckListScreen} />
      {/* <CheckListStack.Screen name="Details" component={DetailsScreen} /> */}
    </CheckListStack.Navigator>
  );
}


const SearchStack = createStackNavigator();

function SearchStackScreen() {
  return (
    <SearchStack.Navigator>
      <SearchStack.Screen name="Search" component={SearchScreen} />
      {/* <SearchStack.Screen name="Details" component={DetailsScreen} /> */}
    </SearchStack.Navigator>
  );
}

const FAQStack = createStackNavigator();

function FAQStackScreen() {
  return (
    <FAQStack.Navigator>
      <FAQStack.Screen name="FAQ" component={FAQScreen} />
      {/* <FAQStack.Screen name="Details" component={DetailsScreen} /> */}
    </FAQStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
      <Tab.Screen name="Calculator" component={CalculatorStackScreen} />
        <Tab.Screen name="CheckList" component={CheckListStackScreen} />
        <Tab.Screen name="Search" component={SearchStackScreen} />
        <Tab.Screen name="FAQ" component={FAQStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});