React Native Boiler Plate NPM package

자주 쓰는 라이브러리 미리 설치된 것으로 볼 수 있는데 npm 패키지 만들어보기.

git clone으로 진행했더니 appName 엉망이라....!!!!!

 

시간 날 때마다 진행해보자.

 

1. react-navigation v5 / styled-components / vector-icons

https://coding-dahee.tistory.com/121

[RN] react-navigation ***v5*** 사용법

yarn add @react-navigation/{native,stack,drawer,bottom-tabs} react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view styled-components react-native-vector-icons 

 

index.js

import 'react-native-gesture-handler';

import App from './App';
import {AppRegistry} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import Sub from './src/screens/Sub';
import {name as appName} from './app.json';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const Container = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={App} />
      <Stack.Screen name="Sub" component={Sub} />
    </Stack.Navigator>
  </NavigationContainer>
);

AppRegistry.registerComponent(appName, () => Container);

 

src/screens/Sub.js

import React from 'react'
import { View, Text } from 'react-native'

const Sub = () => {
    return (
        <View>
            <Text>Sub~~</Text>
        </View>
    )
}

 

2. scripts

    "ios": "react-native run-ios --simulator=\"iPhone 11\"",
    "pod": "cd ios && pod install && cd .."

npm i && yarn pod

 

3. vector icons link

https://github.com/oblador/react-native-vector-icons

 

npm install --save react-native-vector-icons

 

<ios>

Podfile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

cd ios && pod update

 

info.plist

	<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>Zocial.ttf</string>
	</array>

------------

<android>

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

 

 

-------------

 

npm i && yarn pod && yarn ios

 

 

- usage

import Icon from 'react-native-vector-icons/Ionicons';
<Icon name={iconName} size={size} color={color} />