React Native 中的链接库疑难解答

Question

如果我没有遇到很多问题，并且如果我没有花几天时间尝试在 React Native 中正确链接库，我就不会在这里发帖。大多数情况下我没有遇到问题，但这个特殊的库似乎几乎是不可能的。

https://github.com/jerson/react-native-palette-full

这是我的代码，非常基础：

import Palette from "react-native-palette-full";

    componentDidMount() {
Palette.getAllSwatchesFromUrl(this.state.merchant.coverPhoto);
}

正是您对图书馆说明的期望。

相反，我得到了这个：

我试过手动链接：

react-native link react-native-palette-full

我已经尝试了这些手动安装说明：

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-palette-full and add RNPalette.xcodeproj
In XCode, in the project navigator, select your project. Add libRNPalette.a to your project's Build Phases ➜ Link Binary With Libraries
Go to Podfile and add "SDWebImage", "~>4.3.3"
Run your project (Cmd+R)<

这只会导致找不到 RNPalette，尽管该项目就在我的 Xcode 库下。

如何解决此问题并使其正常工作？我简直是在扯头发——我想做的就是从图像中获取颜色样本，而这在 React Native 中似乎几乎是不可能的。

我在注册护士 .60

编辑：

我一直在尝试手动链接，但无论我尝试什么，我都一直收到错误，即找不到 ImageLoader：

#import <React/RCTImageLoader.h> 'React/RCTImageLoader.h' file not found

我也尝试将它作为依赖项添加到库中的 podspec 文件中：

Pod::Spec.new do |s|
  s.name         = "RNPalette"
  s.version      = "1.0.0"
  s.summary      = "RNPalette"
  s.description  = <<-DESC
                 Info about colors from images or url, compatible with **Android** and **iOS**
                   DESC
  s.homepage     = "https://github.com/jerson/react-native-palette-full"
  s.license      = "MIT"
  # s.license      = { :type => "MIT", :file => "FILE_LICENSE" }
  s.author             = { "author" => "jeral17@gmail.com" }
  s.platform     = :ios, "7.0"
  s.source       = { :git => "https://github.com/jerson/react-native-palette-full.git", :tag => "master" }
  s.source_files  = "RNPalette/**/*.{h,m}"
  s.requires_arc = true


  s.dependency "React"
  s.dependency "SDWebImage", "~>4.3.3"
  s.dependency 'React-Core'
  s.dependency 'React-RCTImage'

end

如何链接这个库？有什么办法吗？

编辑：在尝试以下建议之一时，我收到以下错误消息：

Answer 1

完成手动链接后，请按照以下步骤操作

解决方案 1：

1. 在 Xcode 中打开您的项目
2. 右键单击 Libraries 文件夹，然后单击 Add Files to 'PROJECT_NAME'，从此路径 node_modules/react-native/React/React.xcodeproj 添加文件。我在下面附上了一张截图供您参考。

1. 清理项目并运行。

解决方案 2：

1. 在 Xcode 中打开您的项目
2. 点击箭头打开Libraries文件夹并选择RNPalette.xcodeproj
3. 选择Build Settings，导航到Header Search Path并添加以下行"$(SRCROOT)/../../../ios/Pods/Headers"确保它是递归的。我在下面附上了截图

4. 清理和构建。

它现在对我来说很好。下面是一个例子。

import React, { Fragment } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Palette from "react-native-palette-full";

class App extends React.Component {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
  Palette.getNamedSwatchesFromUrl('https://kinsta.com/wp-content/uploads/2017/04/change-wordpress-url-1.png').then((res)=>{
      console.warn("data",res);
    });
  }

  render() {
    return (
      <Fragment>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <Header />
            <View style={styles.body}>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Step One</Text>
                <Text style={styles.sectionDescription}>
                  Edit <Text style={styles.highlight}>App.js</Text> to change this
              </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>See Your Changes</Text>
                <Text style={styles.sectionDescription}>
                  <ReloadInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Debug</Text>
                <Text style={styles.sectionDescription}>
                  <DebugInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Learn More</Text>
                <Text style={styles.sectionDescription}>
                  Read the docs to discover what to do next:
              </Text>
              </View>
              <LearnMoreLinks />
            </View>
          </ScrollView>
        </SafeAreaView>
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

如果您遇到任何问题，请告诉我。如果你愿意，我可以与你分享 POC。我让它在 React-Native 0.60.0 上工作。

Answer 2

手动链接后，修复React/RCTImageLoader.h not found错误 前往：

项目目标，Linked Framework and Libraries 点击+ 并添加libRCTImage.a

如果缺少任何其他 RCT 依赖项，请确保将其添加到 Linked Framework and Libraries。

或者：如果你在 pod 文件中使用 React，你可以像这样在 pod 文件中添加一行：

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'RCTImage' # <- Add this line
  ]
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

注意：有人报告RCTImage 被重命名为React-RCTImage for RN 0.60+