Zachary's Blog logo
Published

React Native Note

Authors
  • avatar
    Name
    Xu Zhiyi
    Twitter

The recent process of chatgpt makes people have to try it, but it is hard for you to think of a better business conversion in real business

One day I found this buddy’sChatMate-GPTwhile visiting git. I found it very interesting, so I planned to copy and learn.

Before reading the official documents, first follow the documents to build the environment

Need Node,Watchman,Ruby

Node corresponds to the version manager nvm

Ruby corresponds to the version manager rvm

After all environments are installed: npx react-native init AwesomeProject

cd AwesomeProject
yarn ios
# or
yarn react-native run-ios

The first error occurred when the run was executed:

PhaseScriptExecution
  
[CP-User]\ Generate\ Specs /Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build
/Script-46EB2E000239C0.sh 

(in target 'FBReactNativeSpec' from project 'Pods')

This problem has troubled me for 2 days. I always thought it was a version problem.

I kept reinstalling node16, node18, xcode14.1, xcode14.3, etc.

The original author of git and google answer also said it was a version problem.

On the third day, a flash of inspiration turned out to be a problem with the path of my folder! ! ! !

Simply, because my folder is under the Zachary's github directory, which caused the above error, and everything became smoother after changing the folder.

As long as the project can run, everything becomes simple.

Analyze the original author's overall structure directory

├── src                      # source directory
│   ├── App.tsx              # app root
│   ├── actions              # actions
│   ├── assets               # static resources
│   ├── components           # components
│   ├── config               # config
│   ├── helper               # application service class
│   ├── hooks                # hooks
│   ├── i18n                 # i18n
│   ├── navigation           # route navigation
│   ├── reducers             # reducers
│   ├── store                # store
│   ├── theme                # theme
│   ├── types                # type definition
│   ├── utils                # utils
│   └── api                  # API Lib
├── .editorconfig            # editor configuration
├── .eslintrc.js             # eslint config
├── .gitignore               # git  ignore
├── .husky                   # git hooks
├── .prettierrc.js           # code formatting rules
├── .watchmanconfig          # Watchman config
├── __tests__                # test
├── android                  # Android directory
├── app.json                 #
├── babel.config.js          # Babel
├── global.d.ts              # tsglobal declaration file
├── index.js                 # entry file
├── ios                      # iOS directory
├── metro.config.js
├── package.json             # Basic project information (such as name, version, license and other metadata) and dependency information (modules installed by npm install), etc.
├── tsconfig.json            # typescript config
└── yarn.lock                # version lock file

The directory structure is clear, let’s start the first step App.tsx

The basic entry file is still the old three：

  • Provider (redux state manage)
  • PersistGate (redux persist)
  • ThemeProvider (theme change)

One thing I haven't encountered before isReact-navigation Library to control routing

Get

<Provider store={store}>
    <PersistGate loading={<Spinner />} persistor={persistor}>
      <ThemeProvider>
        <AppNavigationContainer />
      </ThemeProvider>
    </PersistGate>
</Provider>

In the follow-up, I continued to follow the source code and continued to knock on the packaged open-ai tools. The main content is to call the relevant api of https://api.openai.com/v1/xxx to chat.

At present, it is only possible that my project has already run through the functions of chatting, skinning, switching languages, etc.

And I have made a basic understanding. There are still many things to learn in the future.

To be continued

View on GitHub