Browse Source

taro support

0.73.0
zhiqingchen 3 years ago
committed by tony chen
parent
commit
adb076884a
  1. 21
      LICENSE
  2. 96
      README.md
  3. 2
      android/app/build.gradle
  4. 11
      android/app/src/main/AndroidManifest.xml
  5. 2
      android/app/src/main/res/values/styles.xml
  6. 13
      android/build.gradle
  7. 20
      ios/taroDemo/Info.plist
  8. 19566
      package-lock.json
  9. 5
      package.json

21
LICENSE

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

96
README.md

@ -1,79 +1,55 @@
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). # Taro Native Shell
# Getting Started 参考文档:[Taro React Native 端开发流程 - 分离模式](https://docs.taro.zone/docs/react-native#%E5%88%86%E7%A6%BB%E6%A8%A1%E5%BC%8F)
>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. Taro 原生 React Native 壳工程,和 React Native init 的工程的区别如下:
## Step 1: Start the Metro Server
First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. 0. 集成了 [expo](https://docs.expo.dev/bare/installing-expo-modules/)
1. 集成了 Taro 依赖的所有原生库
2. debug 方式变更: 在 JS 工程中 `yarn dev:rn` 启动 metro server
3. release 方式变更: 在 JS 工程中 `yarn buid:rn` 打包 jsbundle 并通过配置 `rn.output` 输出到壳工程
To start Metro, run the following command from the _root_ of your React Native project: ## 该仓库如何生成
```bash 1. 使用 `react-native` [初始化项目](https://reactnative.dev/docs/environment-setup)
# using npm
npm start
# OR using Yarn
yarn start
``` ```
npx react-native init taroDemo --version 0.73.0
## Step 2: Start your Application
Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
### For Android
```bash
# using npm
npm run android
# OR using Yarn
yarn android
``` ```
### For iOS 2. 使用 `expo-cli` [自动安装 expo](https://docs.expo.dev/bare/installing-expo-modules/#automatic-installation)
```bash ```
# using npm npx install-expo-modules@latest
npm run ios
# OR using Yarn
yarn ios
``` ```
If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. 3. 修改部分代码以支持 Taro,此部分可以直接 cherry-pick
- [scripts] 修改 `android`, `ios` 脚本,增加 `upgradePeerdeps` 脚本
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. - [devDependencies] 增加 `install-peerdeps``pod-install`
- [ios] 添加相关 APP 权限说明
## Step 3: Modifying your App - [ios] 使用亮色主题
- [android] 添加国内 maven 源
Now that you have successfully run the app, let's modify it. - [android] 添加 gif 支持
- [android] 注释原 react native 打包
1. Open `App.tsx` in your text editor of choice and edit some lines. - [android] 使用亮色主题
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes! - [docs] 复制该 `README.md` 文件
- [license] 复制 LICENSE 文件
For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
## Congratulations! :tada:
You've successfully run and modified your React Native App. :partying_face:
### Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). 4. 更新 Taro 需要的依赖(如果还没正式发布,则使用对应的 alpha 或 beta 版本)
- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
# Troubleshooting ```
yarn
yarn upgradePeerdeps
```
If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. ## React Native 小版本更新
# Learn More https://react-native-community.github.io/upgrade-helper/
To learn more about React Native, take a look at the following resources: ## Taro 版本更新
- [React Native Website](https://reactnative.dev) - learn more about React Native. > 使用 Taro 最新版,或者修改 `upgradePeerdeps` 指定 Taro 版本,再执行:
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. ```
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. yarn upgradePeerdeps
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. ```
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

2
android/app/build.gradle

@ -109,6 +109,8 @@ dependencies {
implementation("com.facebook.react:react-android") implementation("com.facebook.react:react-android")
implementation("com.facebook.react:flipper-integration") implementation("com.facebook.react:flipper-integration")
implementation 'com.facebook.fresco:animated-gif:2.5.0'
if (hermesEnabled.toBoolean()) { if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android") implementation("com.facebook.react:hermes-android")
} else { } else {

11
android/app/src/main/AndroidManifest.xml

@ -1,6 +1,17 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.VIBRATE" />
<queries>
<intent>
<action android:name="android.intent.action.DIAL" />
</intent>
</queries>
<application <application
android:name=".MainApplication" android:name=".MainApplication"

2
android/app/src/main/res/values/styles.xml

@ -1,7 +1,7 @@
<resources> <resources>
<!-- Base application theme. --> <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. --> <!-- Customize your theme here. -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item> <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
</style> </style>

13
android/build.gradle

@ -8,6 +8,9 @@ buildscript {
kotlinVersion = "1.8.0" kotlinVersion = "1.8.0"
} }
repositories { repositories {
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
google() google()
mavenCentral() mavenCentral()
} }
@ -18,4 +21,12 @@ buildscript {
} }
} }
apply plugin: "com.facebook.react.rootproject" allprojects {
repositories {
maven {
// expo-camera bundles a custom com.google.android:cameraview
url "$rootDir/../node_modules/expo-camera/android/maven"
}
}
}
apply plugin: "com.facebook.react.rootproject"

20
ios/taroDemo/Info.plist

@ -31,8 +31,24 @@
<key>NSAllowsLocalNetworking</key> <key>NSAllowsLocalNetworking</key>
<true/> <true/>
</dict> </dict>
<key>NSCameraUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to use your camera</string>
<key>NSContactsUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your contacts</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to use your location</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to use your location</string>
<key>NSLocationWhenInUseUsageDescription</key> <key>NSLocationWhenInUseUsageDescription</key>
<string></string> <string>Allow $(PRODUCT_NAME) to use your location</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your microphone</string>
<key>NSMotionUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your device's accelerometer</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to save photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to access your photos</string>
<key>UILaunchStoryboardName</key> <key>UILaunchStoryboardName</key>
<string>LaunchScreen</string> <string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key> <key>UIRequiredDeviceCapabilities</key>
@ -45,6 +61,8 @@
<string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string> <string>UIInterfaceOrientationLandscapeRight</string>
</array> </array>
<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key> <key>UIViewControllerBasedStatusBarAppearance</key>
<false/> <false/>
</dict> </dict>

19566
package-lock.json

File diff suppressed because it is too large

5
package.json

@ -7,7 +7,8 @@
"ios": "react-native run-ios", "ios": "react-native run-ios",
"lint": "eslint .", "lint": "eslint .",
"start": "react-native start", "start": "react-native start",
"test": "jest" "test": "jest",
"upgradePeerdeps": "install-peerdeps @tarojs/taro-rn -o -Y && install-peerdeps @tarojs/components-rn -o -Y && install-peerdeps @tarojs/router-rn -o -Y && pod-install"
}, },
"dependencies": { "dependencies": {
"react": "18.2.0", "react": "18.2.0",
@ -26,7 +27,9 @@
"@types/react-test-renderer": "^18.0.0", "@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3", "babel-jest": "^29.6.3",
"eslint": "^8.19.0", "eslint": "^8.19.0",
"install-peerdeps": "^3.0.3",
"jest": "^29.6.3", "jest": "^29.6.3",
"pod-install": "^0.1.38",
"prettier": "2.8.8", "prettier": "2.8.8",
"react-test-renderer": "18.2.0", "react-test-renderer": "18.2.0",
"typescript": "5.0.4" "typescript": "5.0.4"

Loading…
Cancel
Save