개술

나 는 나 자신 의 React Native (RN) 템플릿 을 만드는 방법 에 대한 강좌 를 찾고 있다. 새 RN 프로젝트 에서 로고 인 init 이후 의 템플릿 을 사용하여 그것 을 초기화할 수 있다npx react-native init someproject --template mytemplate왜냐하면 나는 항상 인터넷에서 내가 처음에 사용하지 않으려고 했던 예비 템플릿을 볼 수 있기 때문이다. 왜냐하면 나는 더욱 간단하고 구체적인 것을 원하기 때문이다. 이렇게 하면 내가 쉽게 문제를 해결할 수 있기 때문이다.
나는 공교롭게도 2017년'데일리 JS'의 크리스 게르만(Chris Geirman)이 쓴 이 유용한 미디어 기사를 발견했다. 제목은'The 1-2-3's of React Native Templates이다.
나는 그것을 완성하지 못했다. 왜냐하면 내가 그것을 완성하려고 시도할 때 몇 가지 문제에 부딪혔기 때문이다. 아마도 그것은 이미 유행이 지났기 때문일 것이다.React Native가 표시하는 오류로 인해 이 기사를 작성하게 되었습니다.
나는 이 일을 가능한 한 간단하게 했다. 이렇게 하면 누구나 따라 할 수 있고, 즉시 완성할 수 있다.

관련된 주요 절차

템플릿을 만드는 저장소

응용 프로그램 템플릿 만들기(React 본체 프로젝트를 템플릿으로 사용)

실제 템플릿 구조 만들기(응용 프로그램 템플릿 + 기타 프로필)

테스트!

길을 잃거나 끊기면 동영상에 기반한 안내/연습here on Youtube을 원하시면 이 동영상이나 유튜브 영상을 참고하세요.

배경.

React 기본 템플릿은 명령을 실행할 때 처음 보는 프로그램과 매우 비슷합니다.

npx react-native init someproject

그리고 npx react-native run-android 또는npx react-native run-ios 아래에 표시된 안드로이드 어플리케이션

사용자 정의 React 본체 템플릿과 다른 점은 응용 프로그램에 내비게이션, 상태 관리 라이브러리, UI 라이브러리, 비동기 저장 등 내용을 기본적으로 배치할 수 있다는 점이다.우리는 지금 간단함을 유지할 것이다.

데모

현재 사용자 정의 React 원본 템플릿을 만들고 있지만, 다음 터미널에서 명령을 실행해서 프로그램을 보여 줍니다. 이 명령은 프로그램 테스트를 만들 것입니다.

npx react-native init test --template https://github.com/roycechua23/react-native-template-simpleredux-boilerplate1.git

그리고 cd someproject && npx react-native run-android 또는cd test && npx react-native run-ios 예를 들어 아래에 표시된 안드로이드 프로그램.
결국

나는 이미 React 내비게이션과 Redux (막후) 설정이 있는 UI 프레임워크를 가지고 있다.

우리 시작하자.

우선, 이 사용자 정의 템플릿은 메모리 라이브러리로 컴퓨터에 놓을 수도 있고, Github, Gitlab, Bitbucket 등 원격 메모리 라이브러리에 놓을 수도 있다는 것을 쉽게 알려 줍니다.
Chris Geirman이 그의 Medium Article에서 언급한 바와 같다

Your template can be called from npm, file://, http://, https://, or git://.

초기 재구매 설정

1.) Github에 테스트 RNTemplate라는 예시 저장소를 설치할 것입니다. (마음대로 이름을 지을 수 있습니다.)본문의 템플릿은 다음과 같은 내용을 포함할 것이다.

초기 템플릿 응용 프로그램 만들기

2) 로컬 컴퓨터에서 터미널을 열고 사용

npx react-native init ProjectName

이 명령은 최신 네이티브 버전을 설치해야 합니다.
참고: flag-template는 ProjectName을 응용 프로그램 이름으로 변환하기 때문에 프로젝트 이름의 정확한 대문자를 따르는 것이 중요합니다.
3) 사용

cd ProjectName

그리고 나서

yarn run android

하면, 만약, 만약...

yarn run ios

중요 최신 버전 0.63 또는 0.64에서 실행되는 React 네이티브 프로젝트의 경우iOS 애플리케이션을 실행하는 동안 오류가 발생하지 않도록 Cocoapods 버전이 1.10.1 버전인지 확인하십시오.다음 명령을 사용하여 업데이트할 수 있습니다.

sudo gem install cocoapods

템플릿 응용 프로그램 구성

4.) 프로그램을 최종적으로 받았을 때 프로그램을 실행하고 기본 React Native Welcome 화면을 보여줌으로써 프로그램이 성공적으로 설치되었는지 확인하십시오.

프로젝트 종속 및 설치 프로그램 설치

iOS 및 안드로이드 어플리케이션 이미지
4.1) 제 예에서 저는 React 네비게이션 라이브러리와 React Native Paper와 같은 UI 프레임워크를 원합니다. React Native Vector 아이콘을 미리 설치했기 때문에 Thread를 사용하여 설치했습니다.

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack

yarn add react-native-paper
yarn add react-native-vector-icons

Githubhttps://github.com/oblador/react-native-vector-icons의react 원본 벡터 아이콘 설정 설명을 주의하십시오.그것은 많은 설명이 있을 것이지만, 아래 그림의 부분을 따라가세요.

이 라이브러리를 추가했습니다.react native cli를 배우기 시작했을 때, 모든 시작 라이브러리에서, 이것은 제가 줄곧 노력해서 해결해 온 문제이기 때문입니다.
그리고 명령을 사용하여 ios에서 설치를 완료합니다

npx pod-install ios

응용 프로그램에서 새 라이브러리를 테스트합니다.js (프레젠테이션으로)

4.2) 우리는 응용 프로그램의 코드를 바꾸어 패키지의 설치가 성공했는지 확인해야 한다.js, 다음은 코드입니다. (직접 복사해서 붙일 수 있습니다.)

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import { Button, Title } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const ProfileScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to the Profile Screen!</Title>
      <Button mode="contained" icon="home" color="blue" 
        onPress={()=>navigation.navigate("Home")}>
          Go to Home Screen
      </Button>
    </View>
  )
}

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to React Native Home Screen!</Title>
      <Button mode="contained" icon="account" color="blue" 
        onPress={()=>navigation.navigate("Profile")}>
          Go to Profile Screen
      </Button>
    </View>
  )
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} 
            options={{headerShown:false}} 
          />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

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

export default App;

우리는 응용 프로그램에 많은 코드를 넣었다.js는 모든 것이 정상인지 확인하고 싶을 뿐입니다. (내비게이션, 종이 UI, 아이콘)
4.3) 그리고 yarn run android와 yarn run ios를 실행한다.결국

여기서부터 필요에 따라 맞춤형 제작을 하거나 RN 템플릿의 외관에 따라 맞춤형 제작을 할 수 있습니다.그 후에 우리는 마침내 템플릿 구조를 만들기 시작할 수 있게 되었다.

실제 템플릿 구조 작성

만약 문제가 발생하면, 당신은 여기에서 이미 완성한 항목을 참고할 수 있습니다 https://github.com/roycechua23/testRNTemplateProject
Githubhttps://github.com/Esemesek/react-native-new-template의 Esemesk 구조를 따라야 합니다.

휴식 시간

흥미로운 이야기는 내가 이전의 블로그를 주목했을 때 내 템플릿에 문제가 생겼다는 오류를 겪었다는 것이다. 오류 메시지가 esemek의github 저장소를 가리키는 것을 발견했다. 이것은 공식적인 것을 의미할 것이다.
나는 마침내 esemek 환매 협의를 가리키는 공식 React Native 안내서를 찾았지만, init에 있기 때문에 찾기가 매우 어려웠다.react 로컬 커뮤니티/cli 저장소의mdhttps://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
이것은 진정한 모험이었다. (나를 믿어라. 너는 그것을 반복하고 싶지 않다.) 이것을 찾으려고 시도했지만, 어쨌든 우리는 계속 전진하자.

계속하다

5.) https://github.com/Esemesek/react-native-new-template에서 저장소 다운로드 또는 복제
6.) 파일 자원 관리자에 새 폴더를 만들고 편의를 위해 템플릿 라이브러리(내 예시에서testRNTemplate)로 이름을 지정한 다음 ProjectName 폴더를template로 이름을 바꾸고 새로 만든 폴더로 복사하거나 이동한다(내가 한 것처럼)

7.) 포장지에 복사한다.json, 스크립트.js와 템플릿입니다.배치하다.js는 react native new template 폴더에서 새로 만든testRNTemplate 폴더로 이동합니다.

8.) testRNTemplate 폴더에서 패키지의 내용을 수정합니다.너의 디테일은 이렇다

{
  "name": "testrntemplate",
  "version": "0.0.1",
  "description": "React Native Template",
  "repository": "https://github.com/roycechua23/testRNTemplate.git",
  "author": "Royce Chua",
  "license": "MIT"
}

참고: 단계 1에서 만든 라이브러리와 관련하여 특정 저장소에 따라 저장소를 변경해야 한다는 점에 유의하십시오.
9.)testRNTemplate 폴더에서 터미널을 열면 모든 코드를 1에서 만든 저장소로 전송할 수 있습니다.)git를 사용합니다.이러한 명령을 참조할 수 있습니다.

git init 
git add . 
git commit -m "first commit"
git remote add origin https://github.com/roycechua23/testRNTemplate.git
git branch -M main
git push -u origin main

10.) 터미널을 켜고 실행합니다.

npx react-native init SomeApp --template https://github.com/roycechua23/testRNTemplate.git

설치 완료:

우리가 얼마 전에 안드로이드와 iOS에서 만든 똑같은 화면을 보셨을 거예요.이 템플릿은 반복해서 사용할 수 있어 시간과 번거로움을 절약할 수 있다.
만약 이 글/블로그/강좌가 당신에게 도움이 되고, 또한 당신이 나의 일을 계속 지지하기를 원한다면, 만약 당신이 이곳에서 나에게 커피 한 잔을 사 줄 수 있다면, 나는 감격해 마지 않을 것입니다: https://www.buymeacoffee.com/royce.chua