ReactNative、iOS 混合开发路径调整

调整点 1：目录结构

调整前目录结构

AFJ-iOS/{RN 相关代码}

调整后目录结构

AFJ-iOS/ReactNative/{RN 相关代码}

调整点 2： iOS 工程中 Podfile 相关配置修改

修改 node_modules 路径以及 use_react_native 路径

调整前

1
2
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

调整后

1
2
require_relative '../ReactNative/node_modules/react-native/scripts/react_native_pods'
require_relative '../ReactNative/node_modules/@react-native-community/cli-platform-ios/native_modules'

修改 reactNativePath 路径

调整前

1
2
3
4
5
6
7
config = use_native_modules!

use_react_native!(
  :path => config[:reactNativePath],
  # to enable hermes on iOS, change `false` to `true` and then install pods
  :hermes_enabled => false
)

调整后

1
2
3
4
5
6
# config = use_native_modules!

  use_react_native!(
    :path => '../ReactNative/node_modules/react-native',
    :hermes_enabled => false,
  )

修改 RN 相关 Pod 显式引用并设置为静态库方式

增加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
pod 'RNCAsyncStorage', :path => '../ReactNative/node_modules/@react-native-async-storage/async-storage'
pod 'RNCMaskedView', :path => '../ReactNative/node_modules/@react-native-community/masked-view'
pod 'RNDeviceInfo', :path => '../ReactNative/node_modules/react-native-device-info'
pod 'RNGestureHandler', :path => '../ReactNative/node_modules/react-native-gesture-handler'
pod 'RNReanimated', :path => '../ReactNative/node_modules/react-native-reanimated'
pod 'RNScreens', :path => '../ReactNative/node_modules/react-native-screens'
pod 'RNSVG', :path => '../ReactNative/node_modules/react-native-svg'

pod 'react-native-appearance', :path => '../ReactNative/node_modules/react-native-appearance"
pod 'react-native-safari-view', :path => '../ReactNative/node_modules/react-native-safari-view"
pod 'react-native-safe-area-context', :path => '../ReactNative/node_modules/react-native-safe-area-context"


$static_framework = ['RNCAsyncStorage','RNCMaskedView','RNDeviceInfo','RNGestureHandler','RNReanimated','RNScreens','RNSVG','react-native-appearance','react-native-safari-view','react-native-safe-area-context']

pre_install do |installer|
 Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
 installer.pod_targets.each do |pod|
   if $static_framework.include?(pod.name)
     def pod.build_type
       Pod::BuildType.static_library
     end
   end
  end
end

修改 IPHONEOS_DEPLOYMENT_TARGET 配置版本

1
2
3
if config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'].to_f < 11.0
  config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
end

调整点 3： iOS 工程中 Targets 配置

修改 Targets - Build Phases - Start Packager / Bundle React Native code and images 脚本相关 RN 引用路径

调整点 4： RN 工程中修改 package.json 中 build 导出路径

package.json 中 scripts 修改

1
"ios-build": "react-native bundle --entry-file='index.js' --bundle-output='../ios/rn-kittentricks.jsbundle' --dev=false --platform='ios' --assets-dest '../ios'",

注意

ReactNative 目录中需要保留 ios 文件夹，ios 文件夹下需要保留以下四个文件

1
2
3
4
AFJ-iOS.xcworkspace
AFJ-iOS.xcodeproj
Podfile.lock
assets

build-ios 之前可以通过脚本创建 ios 文件夹，脚本代码参考

1
2
3
4
5
6
7
8
9
10
11
12
rootPath=$PWD
cd $rootPath
cd ReactNative
mkdir ios
cp -r ../ios/AFJ-iOS.xcworkspace ../ReactNative/ios
cp -r ../ios/AFJ-iOS.xcodeproj ../ReactNative/ios
cp -r ../ios/Podfile.lock ../ReactNative/ios
cp -r ../ios/assets ../ReactNative/ios
npm run env -- prod
npm run build
npm run ios-build
rm -r ios

Flutter 、iOS 混合开发路径调整

调整点 1：目录结构

调整前目录结构

AFJ-iOS/ios/Flutter/{Flutter 相关代码}

调整后目录结构

AFJ-iOS/Flutter/{Flutter 相关代码}

调整点 2： iOS 工程中 Podfile 相关配置修改

修改 flutter_application_path 路径

调整前

1
flutter_application_path = './Flutter/afjflutter'

调整后

1
flutter_application_path = '../Flutter/afjflutter'