Skip to content

Latest commit

 

History

History
280 lines (211 loc) · 12.3 KB

README.md

File metadata and controls

280 lines (211 loc) · 12.3 KB

React Native V2EX

The project is already integrated with Clickstream Android and Swift SDK. You can find more detail about Clickstream Android SDK and Clickstream Swift SDK.

The project used React Native to build a V2EX mobile client application and based entirely on the V2EX open API. This project is Based on RN 0.71.5.

The Figma design draft is open source and can be duplicated.

Features

  1. Based on React Native version 0.71.3.
  2. Introduce strong type-checking in TypeScript to ensure maintainability, readability, and stability.
  3. Eslint code specification check, prettier code beautification, Husky as git hooks for code formatting and specification verification.
  4. i18n integration, multi-language support. The language switching function has been implemented.
  5. Implement the function of switching between app themes (light color, dark color, automatic switching).
  6. Use Redux, use Redux Thunk asynchronously, and use Redux Persist to persist data.
  7. Use @redux -devtools/extension for Redux debugging.
  8. The route uses React Navigation and uses Stack Navigator, Bottom Tabs Navigator, and Material Top Tabs Navigator.
  9. Use react-native-splash-screen to control the opening screen.
  10. Toast also integrates react-native-easy-toast、react-native-toast-message.
  11. Use dayjs for date formatting.
  12. WebView uses react-native-webview.

Preview

iOS

preview

Android

preview

Development

Currently developed under macOS, the iPhone Simulator/iPhone 14 with iOS 16+ and AVD Emulator/Mi Phone with Android 9.0 have all been successfully compiled and run.

Specifically, you can configure the React Native development environment and iOS, Android environments according to the official website. See here.

Develop

# clone repos
$ git clone https://github.com/funnyzak/react-native-v2ex.git && cd react-native-v2ex

# deps install
$ yarn

# Additional fixes for dependency packages
yarn postinstall

# ios pod install
yarn pod

# start react-native-debugger (only mac)
yarn debug

# debug https://reactnative.cn/docs/debugging
npx react-devtools

# iOS simulator start
yarn ios

# Android simulator start
yarn android

# plop generate template
yarn p

# print rn info
npx react-native info

# upgrade rn version
npx react-native upgrade

# iOS debug info start
npx react-native run-ios --verbose

# iOS release build
npx react-native run-ios --configuration Release

# iOS debug use special device
react-native run-ios --simulator="iPhone 8"

# Android debug info start
npx react-native run-android --verbose

# Testing the release build
npx react-native run-android --variant=release

# build android release apk
cd android
# aab file
./gradlew bundleRelease
# apk file
./gradlew assembleRelease

npx react-native run-android --variant release

Structure

├── src                      # src folder
│   ├── App.tsx              # app root componet
│   ├── actions              # actions
│   ├── assets               # static assets
│   ├── components           # components
│   ├── config               # configure file
│   ├── helper               # application helper
│   ├── hooks                # hooks
│   ├── i18n                 # Multi-language support
│   ├── navigation           # route navigation
│   ├── reducers             # reducers
│   ├── store                # store
│   ├── theme                # theme
│   ├── types                # types definition
│   ├── utils                # utils
│   └── api                  # API library
├── .editorconfig            # editor configure
├── .eslintrc.js             # eslint configure file
├── .gitignore               # gitignore rules
├── .husky                   # git hook configuration
├── .prettierrc.js           # Code formatting rules
├── .watchmanconfig          # Watchman configure file
├── __tests__                # test files
├── android                  # Android app folder
├── app.json                 #
├── babel.config.js          # Babel configure file
├── global.d.ts              # global file
├── index.js                 # the index file of application
├── ios                      # iOS app folder
├── metro.config.js
├── package.json             # the package.json file of the project
├── tsconfig.json            # typescript compile configure file
└── yarn.lock                # locking files with dependent versions

Debug

Debug Tools

  • Hermes Debugger is a standalone app for debugging React Native apps that use Hermes.
  • Flipper is a desktop debugging platform for mobile developers.
  • react-devtools is a standalone app for inspecting the React component hierarchy.
  • React Native Debugger is a standalone app for debugging React Native apps, and includes React DevTools.
  • Google Chrome Debug, Referrer link.

Debug Menu

You can open the development menu by shaking your device or selecting the “Shake Gesture” option in the iOS emulator's “Hardware” menu. Also, if running in an iOS emulator, you can also press the Command⌘+D shortcut; the Android emulator corresponds to Command⌘+M (possibly F1 or F2 on Windows), or directly run adb shell input keyevent 82 in the command line to send menu key commands.

react-native-debugger

  1. Install react-native-debugger.
  2. Run yarn debug to start react-native-debugger.
  3. Start the emulator yarn ios and open the debug remote option in the emulator.

Note: To use this method, Hermes must be disabled, otherwise an error will be reported. It is recommended to enable the Hermes switch and use Hermes debugging.

FAQ

Invariant Violation: Module AppRegistry is not a registered callable module

npm cache clean --force
watchman watch-del-all
rm -rf node_modules

# for ios
cd ios
pod update && pod install
cd ..
npx react-native run-ios
# for android
cd android && ./gradlew clean
cd ..
npx react-native run-android

Reference: https://stackoverflow.com/questions/64768328/invariant-violation-module-appregistry-is-not-a-registered-callable-module-cal

RCTBridge required dispatch_sync to load RNGestureHandlerModule

software-mansion/react-native-gesture-handler#722

XCode compile failed

# delete cache file
rm -rf ~/Library/Developer/Xcode/DerivedData

Android compile and launch attention

Note that the Gradle and Java SDK (Java Home) versions correspond, which can be found in. /android /gradle.properties settings org.gradle.java.home

LaunchScreen setting

iOS uses LaunchScreen.storyboard, just use Xcode to edit it.

Modify bundle name

See here.

Android signing and packaging

See here.

Using fetch to get/post on a HTTPS web server which is using a valid and trusted but not public CA.

  1. Edit the android/app/src/main/AndroidManifest.xml
  2. Add the android:networkSecurityConfig="@xml/network_security_config" to the tag
  3. Create the folder android/app/src/main/res/xml and inside a file called network_security_config.xml 
    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true" />
</network-security-config>

Dependencies

  • eslint
  • lodash
  • redux
  • react-native-safe-area-context
  • react-native-render-html
  • react-navigation
  • react-devtools
  • @redux-devtools/extension
  • async-storage
  • react-native-gesture-handler
  • react-native-fast-image
  • react-native-reanimated
  • react-native-localize
  • react-native-device-info
  • react-native-webview
  • react-native-skeleton-placeholder
  • react-native-actions-sheet
  • prettier
  • patch-package

Reference