概要

私は私自身の反応を作る方法についてのチュートリアルを探していました(私はinitの後のテンプレート--旗を使用している新しいRNプロジェクトでinitすることができた)ネイティブテンプレートnpx react-native init someproject --template mytemplate私はいつもインターネット上で見ているので、私は本当に私は簡単に私は自分の道をはるかに苦労せずに回避することができます具体的な何かを望んでいたので、私は本当に最初に使用していないテンプレートをプリフォームされます.
私は偶然、2017年に毎日のJSバックのクリスゲイマンによってこの役に立つ媒体記事を見つけましたThe 1-2-3's of React Native Templates "
私は、それがすでに時代遅れだったので、それをしようとするとき、若干の問題に遭遇したので、それを終えることができませんでした.反応ネイティブによって示されるエラーの1つは、私にこの記事を作ることに導きました.
私はこのように誰もが続くことができるように簡単にし、それがすぐに行わ得る.

主なステップ

テンプレートのリポジトリの作成

アプリケーションテンプレートを作成する(テンプレートとして使用するネイティブプロジェクトを作成する)

実際のテンプレート構造を作成する

テスト!

あなたが迷子になるか、立ち往生するならば、あなたはビデオベースのガイドが欲しいhere on Youtube .

背景

反応ネイティブテンプレートは、単にコマンドを実行するときに最初に表示されるアプリのようです

npx react-native init someproject

それからどちらかで走るnpx react-native run-android or npx react-native run-ios 次のようなAndroidアプリなど

カスタム反応ネイティブテンプレートとの違いは、我々は、ナビゲーション、状態管理ライブラリ、UIライブラリ、asyncstorageなどのようなデフォルトでアプリケーションにあるものを置くようになるということです.我々は、今のところ単純なものを保ちます.

デモ

私は現在、私自身の好みのカスタム反応ネイティブテンプレートを作成していますが、アプリケーションのテストを作成する以下のコマンドを実行してデモアプリケーションを試すことができます

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

それからどちらかで走るcd someproject && npx react-native run-android or cd test && npx react-native run-ios 次のようなAndroidアプリなど.
結果は

最小限の労力と私は今、反応のナビゲーションをUIフレームワークもredux(舞台裏)は、すでにセットアップがあります.

始めましょう

まず最初に、このカスタムテンプレートがあなたのコンピュータの上に倉庫かリポジトリとしてGitHub、Gitlab、Bitbucketの上でそうすることができると言うのは便利です.
彼の上でクリスガイマンによって言及されるようにMedium Article

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

初期設定

1 . githubのサンプルリポジトリをtestrntemplateとして設定します(必要に応じて名前を付けることができます).これはこの記事のサンプルテンプレートを含みます.

テンプレートの作成

2 )ローカルマシンで端末をオープンし、初期反応のネイティブアプリケーションを作成します

npx react-native init ProjectName

このコマンドは最新の安定した反応ネイティブバージョンをインストールするべきです.
注意:厳密な名前ProjectNameでの資本化に従うことは絶対に重要です.なぜなら、FLAG - templateはアプリケーションの名前にプロジェクト名を変換するからです.
3 .アプリケーションの実行

cd ProjectName

then

yarn run android

あなたがマックにいるならば

yarn run ios

重要な注意:最新バージョン0.63または0.64で動作しているネイティブプロジェクトの対応について.あなたのCocoPodsのバージョンは、IOSのアプリを実行して任意のエラーを避けるためにバージョン1.10.1にあることを確認してください.このコマンドを使用して更新できます.

sudo gem install cocoapods

テンプレートアプリケーションの設定

最後に、アプリケーションを最初に実行してみると、デフォルトのネイティブウェルカム画面を表示することによってうまくインストールされていることを確認します.

プロジェクト依存関係とセットアップのインストール

IOSとAndroidアプリの画像
私のケースでは、私は反応ナビゲーションライブラリとUIネイティブフレームのようなUIフレームワークのような反応ネイティブネイティブベクターのアイコンを事前にインストールしたので、私は糸を使用してインストールされて

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

してくださいGitHubにネイティブベクターのアイコンの設定の指示に反応を注意してくださいhttps://github.com/oblador/react-native-vector-icons . それは多くの指示を持ちますが、あなたが以下のイメージで見る部分に従ってください.

私はすべての起動ライブラリのこれは私が反応ネイティブネイティブCLIを学ぶために始めていたときに私は苦労していたので、このライブラリを追加しました.
コマンドを使用してIOSのインストールを終了します

npx pod-install ios

app上の新しいライブラリのテスト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.3yarn run android and yarn run ios (もしMacの場合)結果は

ここから、お客様のニーズに基づいてカスタマイズすることができますか、単にあなたのRNのテンプレートをどのように見えるようにします.その後、テンプレート構造を作り始めることができます.

実際のテンプレート構造の作成

問題が発生した場合は、完成したプロジェクトをここで参照できますhttps://github.com/roycechua23/testRNTemplateProject
我々のカスタムを作るために、我々はGithubでこの構造esemesekに従う必要がありますhttps://github.com/Esemesek/react-native-new-template

ブレークタイム

楽しい話、私は私が私のテンプレートと何かが間違っていると言う誤りに遭遇したとき、私は以前のブログに従っていました、そして、私はエラーメッセージが私がEemekのGithubリポジトリ(この上)であると指摘しました.
私は、当局がEthekのレポにポイントしているネイティブガイドに反応するのを見つけるのをやめました、しかし、それがinitにあるので、それは見つけるのが簡単でありませんでした.ここの反応ネイティブコミュニティ/CLIリポジトリhttps://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
それは本当の冒険(私を信じて、あなたはそれを繰り返すことを望んでいない)これを見つけるしようとするととにかくとにかく移動しましょう.

継続

5 )リポジトリをダウンロードするhttps://github.com/Esemesek/react-native-new-template
6 .ファイルエクスプローラで、新しいフォルダを作成し、便宜上、テンプレートのリポジトリの後にTestnTemplateのテンプレートリポジトリをテンプレートに名前を変更して、それをコピーしたり、

7 .)コピーオーバーパッケージ.JSONスクリプト.JSとテンプレート.設定.あなたの新しく作成されたTestnTemplateフォルダーの上に反応するネイティブの新しいテンプレートフォルダからのJS.

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

インストール完了

あなたは私たちがしばらく前にAndroidとIOS上で作った同じ画面を参照してくださいする必要があります.このテンプレートは何度も繰り返して再利用することができます.
この記事/ブログ/チュートリアルがあなたを助けてくれて、私の仕事を支えたいと思っているなら、ここでコーヒーを買えばありがたいです.https://www.buymeacoffee.com/royce.chua