The original address

Initialize the project

Create a folder called react-naive-better-template

mkdir react-native-better-template
Copy the code

Initialization project (optional)

yarn init
Copy the code

Creating a basic template

Create a typescript-based base template using the React – Native official scaffolding

npx react-native init ProjectName --template react-native-template-typescript --skip-install
Copy the code

Parameter analysis:

  • init: is followed by the name of the project to be generated
  • --template: indicates the template to download. The following parameters can be the Github address or the address of the local path. The built-in parameters are used to indicate what to downloadReact-native is the official TS template
  • --skip-install: indicates that node_modules and POD dependencies are not installed after the template is downloaded

There are two things to note here

  1. Don’t usetemplateThis is the name of the project, otherwise it will generate an error when using this template to generate the project (error when changing ios folder and file name), this should be a scaffold bug.
  2. Pay attention to add--skip-installParameter, the template project does not need to have dependencies, otherwise it will generate errors due to too many files

(Optional) Modify the ProjectName file to be named template so that it looks straight and the directory structure is as follows:

Create a template configuration file

Create a new file named template.config.js and add the following content:

module.exports = {
  // Placeholder used to rename and replace in files
  // package.json, index.json, android/, ios/
  placeholderName: "ProjectName".// Directory with template
  templateDir: "./template".// Path to script, which will be executed after init
  // postInitScript: "./script.js"
};
Copy the code

Parameter analysis:

  • placeholderName: specifies a placeholder whose value will be looked up when the project is generated and replaced with the project name passed in by the user
  • teamplateDir: Specifies the path to download the template
  • postInitScript: Specifies the script to run after initialization. This function is not required here and is commented out first

The finished directory structure:

test

Now that you have created the custom template, you can modify the template folder as needed, such as adding some common third-party libraries.

Let’s test this by generating a new project using a custom template

npx react-native init test_custom_template --template your/path/to/template
Copy the code

Replace your/path/to/template with your custom template path

Test result, success

Reference: github.com/react-nativ…

Afterword.

I created a template on Github that extends the React-Native official scaffolding template and click to enter

Currently available features:

  • Support the typescript
  • Join the react – navigation5
  • Add some common libraries
  • Axios, DVA, etc will be added later…

The target can be made into a react-Native template out of the box, welcome to Start.